CSS整体界面设计

来源：互联网发布：白头发会越拔越多知乎编辑：程序博客网时间：2024/05/01 03:05

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>整体界面设计</title>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
background-color:#efefef;
margin:0;
}
#wrapper {
width:980px;
margin:0 auto 20px;
}
/*设置页眉的样式*/
header {
position:relative;/*为页眉标题和搜索表单提供上下文环境*/
margin:10px 0;
height:70px;/*固定高度，包含绝对定位元素*/
background:#fff;
border-radius:20px 0px 20px 0px;/*顺序：左上，右上，右下，左下*/
box-shadow:0px 12px 8px -9px #555;/*负拓展值把阴影定位到盒子内部*/
padding:1px;
}
header section#title {
position:absolute;
left:0;
top:0;
width:300px;
height:65px;
}
header h1 {
padding:0px 12px 0;
font-family:Arial, Helvetica, sans-serif;
font-weight:900;
font-size:2.0em;
line-height:1;
color:#4eb8ea;
letter-spacing:-0.025em;
margin:0;
}
header h2 {
padding:0px 12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:400;/*设置字体的粗细*/
font-size:.9em;
line-height:1;/*设置行高*/
letter-spacing:-0.025em;
color:#333;
}
form.search {
position:absolute;
width:150px;
top:23px;
right:20px;
}
.search input {
float:right;
width:70px;
padding:2px 0px 3px 5px;
border-radius:10px 0px 10px 0px;
font-family:Arial, Helvetica, sans-serif;
font-weight:400;
font-size:1em;
color:#888;
outline:none;/*去掉默认的轮廓框*/
-webkit-transition:1s width;/*搜索框过渡效果，记得要带厂商标记*/
}
.search input:focus {
width:140px;/*在输入框获得焦点后，搜索框实现过渡效果*/
}
.search label {
display:none;
}
form.search input {
background-color:#fff;
}
form.search input::-webkit-input-placeholder {
color:#ccc;
}
/*设置列表项的样式*/
nav.menu {
margin:19px auto;
padding:0px;
font-size:.8em;
text-align:center;/*将菜单内容放在正中间*/
}
nav.menu>ul {
display:inline-block;/*搜索包裹了所有列表项*/
}
nav.menu li {
float:left;
position:relative;/*为子列表提供定位上下文*/
list-style:none;
}
nav.menu li a {
display:block;
padding:.25em .8em;
font-family:Arial, Helvetica, sans-serif;
font-weight:600;
font-style:normal;
font-size:1.2em;
color:#fff;
text-align:left;
text-decoration:none;
}
/*设置每个链接的背景颜色*/
nav.menu li.choice1 a {
background-color:#f58c21;
}
nav.menu li.choice2 a {
background-color:#4eb8ea;
}
nav.menu li.choice3 a {
background-color:#d6e636;
}
nav.menu li.choice4 a {
background-color:#a38567;
}
nav.menu li.choice5 a {
background-color:#3f64ea;
}
nav.menu li:hover > a {
border:0;
color:#555;
background-color:#fff;
}
nav.menu li:first-child a {
border-bottom-left-radius:10px;
}
nav.menu li:last-child a {
border-bottom-right-radius:10px;
}
/*设置下拉菜单样式*/
nav.menu li ul {
opacity:0;
visibility:hidden;/*隐藏下拉菜单*/
position:absolute;/*相对于父菜单定位*/
left:0;
top:100%;
-webkit-transition:1s all;/*设置过渡效果*/
-moz-transition:1s all;
transition:1s all;
}
nav.menu li:hover > ul {
opacity:1;
visibility:visible;
}
nav.menu li li {
float:none;/*去除浮动，让二级列表项上下堆叠*/
}
nav.menu li li:last-child a {
border-radius:0;
}
nav.menu li li:first-child a {
border-bottom-left-radius:10px;
}
.no-csstransitions nav.menu li ul { /*针对不支持过渡效果的浏览器*/
visibility:visible;
opacity:1;
display:none;
}
.no-csstransitions nav.menu li:hover > ul {
display:block;
}
/*设置专题区的样式*/
section#feature_area {
overflow:hidden;/*将子元素中是浮动元素进行包围*/
margin:16px 0 0;/*在页眉和专题区留出空间*/
padding:0 0 10px;
}
section#feature_area article {
float:left;
width:66%;
}
section#feature_area aside {
float:right;
width:34%;
}
section#feature_area article.inner {
padding:12px;
background-color:#fff;
border-radius:20px 0;
box-shadow:0px 12px 8px -9px #555;
}
section#feature_area article a {
text-decoration:none;
}
section#feature_area article img {
float:left;
padding:0px 10px;
}
section#feature_area article h4 {
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
font-weight:400;
color:#f58ce2;
font-size:1.0em;
letter-spacing:-0.025em;
}
section#feature_area article h3 { /*博文标题*/
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:700;
font-size:1.75em;
color:#555;
margin:0 0 12px 0;
letter-spacing:-0.025em;
}
section#feature_area article#blog_loadoff p { /*博文内容*/
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:400;
font-size:1.1em;
line-height:1.5em;
color:#616161;
margin:0px 0px;
text-align:justify;
}
section#feature_area article#blog_leadoff p::first-letter { /*首字母下沉*/
font-family:Lato, helvetica, sans-serif;
font-style: normal;
font-weight:700;
font-size:4.5em;
float:left;
margin:.05em .05em 0 0;
line-height:0.6;
text-shadow:1px 3px 3px #ccc; /*IE10 及以上版本支持文本阴影*/
}
section#feature_area article#blog_leadoff p::first-line { /*首行小型大写字母*/
font-variant:small-caps;
font-size:1.2em;
}
section#feature_area aside { /*右栏*/
width:34%;
float:right;
}
form.signin {
width:19em; /*表单的整体宽度*/
float:right;
background:#fff;
border-radius:10px 0 10px 0;
box-shadow: 0 12px 8px -9px #555;
}
.signin fieldset { border:0; margin:10px 14px;}/*去掉默认的边框*/
.signin legend span {
font-family:Lato, helvetica, sans-serif;
font-weight:700; font-size:1.3em; line-height:1.1em;
color:#4eb8ea;
letter-spacing:-.05em;
}
.signin section {
overflow:hidden; /*包围控件和标注*/
padding:.25em 0; /*表单元素的间距*/
}
.signin section label {
font-family:"Source Sans Pro", helvetica, sans-serif;
font-weight:400;
float:left;
width:5em; /*标注栏的宽度*/
margin:.5em .3em 0 0; /*外边距保持文本与控件的间距*/
line-height:1.1;
color:#555;
}
.signin section input {
float:right;
width:10.5em; /*控件栏的宽度*/
margin:.2em 0 0 .5em;
padding:3px 10px 2px; /*输入文本与控件的间距*/
color:#555;font-size:.8em;
outline:none; /*去掉默认的轮廓线*/
border-radius:10px 0 10px 0;
}
input:-webkit-autofill { color:#fff !important; } /*去掉WebKit 默认的黄色背景*/
.signin section input[type=submit] {
float:right; /*将按钮与控件右边对齐*/
width:auto; /*重设按钮宽度*/
margin:0 2px 3px 0;
padding:0px 8px 3px;
font-size:1em;
font-weight:800;
color:#fff;
border:none;
background-color:#d6e636;
box-shadow:1px 1px 2px #888;
}
.signin section p{ /*内容为"not signed up?"*/
float:right;
clear:both;
margin:.2em 0 0;
text-align:right;
font-size:.8em;
line-height:1;
color:#555;
}
.signin section p a { color:#333; }/*到注册表单的链接*/
.signin section p a:hover {
color:#777;
text-decoration:none;
}
.signin section p.direction.error { /*错误消息*/
display:block;
color:#f00; /*添加error 类后，把说明文字变成红色*/
}
.signin section p.direction { display:none; } /*隐藏错误消息*/
section#feature_area nav {
width:19em; /*容器整体宽度*/
float:right;/*与区域右边对齐*/
margin:15px 0 0; /*上方间距*/
padding:.6em 0em .75em; /*链接上下的间距*/
background:#fff;
border-radius:10px 0 10px 0;
box-shadow: 0 12px 8px -9px #555;
}
#feature_area nav h3 {
padding:0 14px 0; /*标题左右的空间*/
font-family:Lato, helvetica, sans-serif;font-weight:700;
font-size:1.3em;
text-align:left;
color:#aaa;
letter-spacing:-.05em;
}
#feature_area nav ul { margin:0em 0 0 20px; }
#feature_area nav li {
padding:.7em 0 0 2em;
position:relative; /*项目符号的定位上下文*/
list-style-type:none
}
#feature_area nav li:before { /*定制项目符号*/
content:""; /*用空字符串，因为不需要实际内容*/
position:absolute; /*相对于列表项定位*/
height:10px; /*项目符号大小*/
width:10px;
left:12px; /*定位项目符号*/
top:12px;
border-radius:5px 0 5px 0; /*项目符号形状*/
background-color:#d6e636; /*项目符号颜色*/
box-shadow:1px 1px 2px #888;
}
#feature_area nav li a {
display:block; /*链接与列表项同宽*/
text-decoration:none; /*去掉默认的下划线*/
font-size:.9em;
color:#616161;
}
#feature_area nav li a:hover { color:#000; }
section#book_area { /*与布局同宽*/
clear:both;
border-radius:20px 0px 20px 0px;
border:1px solid #f58c21;
margin:8px 0 16px; /*上下间距*/
overflow:hidden;
}
#book_area article { /*四本书四栏*/
float:left;
width:25%;
padding:10px 0;
background:none;
}
#book_area article .inner { /*封面外包装*/
position:relative; /*为弹出层提供定位上下文*/
width:140px; /*包装每一本书*/
margin:0 auto; /*在各自article 元素内居中每一本书*/
}
#book_area .inner h3 { /*旋转文字*/
position:absolute;
width:160px;
left:112%; bottom:5px; /*把文字定位在图书右侧*/
transform:rotate(-90deg); /*旋转文字需要使用带厂商前缀的属性*/
transform-origin:left bottom; /*设定旋转中心点，需要带厂商前缀的属性*/
color:#ccc;
font-size:1.4em;
font-family:Lato, helvetica, sans-serif;
font-style:normal;
font-weight:900;
text-align:left;
}
/*较窄的封面需要不同的偏移量*/
#book_area article.right:last-child h3 { left:85%; }
#book_area article img { box-shadow: 0 12px 8px -9px #555; }/*封面阴影*/

#book_area article aside { /*弹出层共享样式开始*/
display:none; /*隐藏弹出层*/
position:absolute; /*相对于包含图片的内部div*/
z-index:2;
width:200px; /*弹出层宽度*/
background:#fff; padding:10px 2px 5px; /*弹出层内容边距*/
border:2px solid #f58c21;
border-radius:10px 0px 10px 0px;
box-shadow:4px 4px 16px #555;
color:#555;
font-family:"Source Sans Pro", helvetica, sans-serif;
font-size:.8em;
line-height:1.5em;
}
#book_area article:hover aside { display:block; }/*鼠标悬停于封面时显示弹出层*/
#book_area article aside li {
padding:.25em 0 .75em 1em; /*列表项的垂直间距和左边距*/
list-style-type:none; /*去掉默认的项目符号*/
line-height:1.2em;
}
#book_area article aside li a { /*链接文本*/
text-decoration:none;
font-size:1.2em;
color:#616161;
}
#book_area article aside li a:hover { /*悬停时突显链接*/
color:#333;
} /*弹出层共享样式结束*/
#book_area article.left aside {/*左侧两本书*/
left:84%; top:14px; /* 把弹出层定位在图片右侧*/
}
#book_area article.right aside {/*右侧两本书*/
right:84%; top:14px;/*把弹出层定位在图片左侧*/
}
#book_area article aside:after { /*橙色三角形*/
content:""; /*需要有内容，这里是一个空字符串*/
position:absolute; /*相对于弹出层定位*/
top:33px;
border:12px solid;
height:0px; width:0px; /*收缩边框创造三角形*/
}
#book_area article.left aside:after { /*左侧图书弹出层的三角形定位及颜色*/
right:100%;
border-color:transparent #f58c21 transparent transparent;
}
#book_area article.right aside:after { /*右侧图书弹出层的三角形定位及颜色*/
left:100%;
border-color:transparent transparent transparent #f58c21;
}
#book_area article aside:before { /*白色三角形*/
content:""; /*需要有内容，这里是一个空字符串*/
position:absolute; /*相对于弹出层定位*/
border:8px solid;
height:0px; width:0px; /*收缩边框创造三角形*/
z-index:100; /*保证白色三角形在最前面*/
top:37px;
}
#book_area article.left aside:before { /*左侧图书白色三角形的样式、位置和颜色*/
right:100%;
border-color:transparent white transparent transparent;
}
#book_area article.right aside:before { /*右侧图书白色三角形的样式、位置和颜色*/
left:100%;
border-color:transparent transparent transparent white;
}
footer {
padding:.5em 0 .35em 0; /*内容上下的间距*/
text-align:center; /*居中内容*/
border-radius:10px 0px 10px 0px;
background:#fff;
box-shadow:0 12px 8px -9px #555;
}
footer p { /*文本行的样式*/
font-family:'Source Sans Pro';
font-weight:400;
font-size:.85em;
letter-spacing:-.05em;
color:#555;
}
footer p a { /*文本行中的链接*/
font-family:'Source Sans Pro';
font-style:italic;
font-weight:700;
font-size:1em;
color:#4eb8ea;
text-decoration:none;
}
footer p a:hover {
color:#777;
}
footer ul { /*链接列表*/
display:inline-block; /*收缩包围列表*/
margin:4px 0 0;
}
footer li {
list-style-type:none; /*去掉默认的项目符号*/
float:left; /*让列表项水平排列*/
font-family:"Source Sans Pro";
font-weight:400;
font-size:.85em;
}
footer li + li a {
border-left:1px solid #ccc; /*链接分隔线*/
}
footer li a {
text-decoration:none; /*去掉链接默认的下划线*/
color:#aaa;
padding:0 5px; /*链接间距*/
}
footer a:hover {
color:#777;
}
</style>
</head>
<body>
<div id="warpper">

<header>
<section id="title">
<h1>Stylin’ with CSS</h1>
<h2>The Blog and Books of Charles Wyke-Smith</h2>
</section>
<nav class="menu">
<ul>
<li class="choice1">
<a href="#">Articles</a>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li>
<li class="choice2"><a href="#">Books</a></li>
<li class="choice3"><a href="#">Resources</a></li>
<li class="choice4"><a href="#">Bookshelf</a></li>
<li class="choice5"><a href="#">Contact Me</a></li>
</ul>
</nav>
<form class="search" target="#" method="post">
<label for="user_name">Search</label>
<input type="search" id="user_name" name="user_name" placeholder="search" />
</form>
</header>

<section id="feature_area">
<article id="blog_loadoff">
<div class="inner">
<h4>September 7, 2012</h4>
<a href="#"><h3>Managing CSS Classes with jQuery</h3></a>
<img src="/images/0.jpg" width="314" height="220" alt="Charles" />
<p>Sintus at neque in magna...这一块没有什么新东西，都是你知道的。如图7-17 所示，内容通过text-align:center
居中对齐，段落及其文本都继承了这一设定，在footer 内居中。这个声明正常情况
下不会让链接列表居中，因为列表项由块级元素构成，默认会与容器同宽。不过，
我给ul 设定了display:inline-block，让它收缩包围li 元素。这样实际上就相当于
为ul 指定了宽度，因此text-align:center 对它也会起作用。记性好的读者应该知
道，在前面介绍菜单的时候，我们解释了应用display:inline-block 之后，元素宽
度仍然是可变的。换句话说，即使将来再向这个列表中添加链接，或者从中删除链
接，列表仍然会居中。最后，再提醒你一下，对列表应用自动外边距（而不对footer
应用text-align:center），同样能让它在页脚内居中。</p>
</div>
</article>
<aside>
<form autocomplete="off" class="signin"
action="process_form.php" method="post">

<fieldset>


<legend><span>Sign In for Code and Updates</span></legend>
<section>


<label for="email">Email</label>

<input type="text" id="email" name="email" />
</section>
<section>
<label for="password">Password</label>
<input type="password" id="password" name="password"
maxlength="20" /> 
<p class="direction">Wrong user name or password</p>
</section>
<section>

<input type="submit" value="Sign In" />
<p class="signup">
Not signed up? <a href="#">
Register now!
</a>
</p>
</section>
</fieldset>
</form>
<nav>
<h3>Recent Articles</h3>
<ul>
<li><a href="#">Z-index—Layers of Confusion</a></li>
<li><a href="#">Box-Image Techniques</a></li>
<li><a href="#">Shadow FX with CSS3</a></li>
</ul>
</nav>
</aside>
</section>
<section id="book_area">
<article class="left">
<div class="inner">
<h3>HTML5 + CSS3</h3>
<img src="/images/1.jpg" alt="Stylin' with CSS cover" />
<aside>

<ol>
<li><a href="#">Download the Code</a></li>
<li><a href="#">Table of Contents</a></li>
<li><a href="#">Buy this Book</a></li>
</ol>
</aside>
</div>
</article>

</section>
<footer>
<p>
A CSS template from <a href="http://www.stylinwithcss.com">
<em>
Stylin'
with CSS, Third Edition
</em>
</a> by Charles Wyke-Smith
</p>
<nav>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Charles</a></li>
</ul>
</nav>
</footer>

</div>
</body>
</html>

0 0