最近感觉对CSS的运用规范还不是太了解，于是在图书馆借了本《精通CSS》，开始学习，刚开始不怎么重视，只是大概的浏览了遍全书，感觉没什么收获，其中感觉很多里面的技术好像自己根本没有接触过，然后又开始了第二遍，这边自己也跟着书本的代码敲了一遍，就在这个过程中出现了很多问题，如果完全按照以前自己的那种随心所欲的思想去完成那些页面元素的编写，往往会非常的复杂，而且根本不规范，导致后期维护非常的困难，主要表现在代码语义化，结构化，组件化等方面的不周全考虑，完全抛开了这些概念，只是一味的去追求什么能实现那些页面效果就乱用html标签区实现，根本不考虑其他因素，所以这是很致命的，也是自己一直以来运用CSS时很迷茫的；例如，以前自己什么都用div去实现，往往导致全页面div混杂，还有随意滥用id,class，显得代码非常臃肿还非常难理解，后期想维护是根本没法看的，想要维护还不如重新写了；所以这次学习的第一收获是使自己更加注重css规范了，最起码自己有这个注重意识（虽然要实践起来还是需要锻炼的）
然后，感觉自己以前对CSS的一些基本概念的理解也还是很浅显的，以前自己往往是为了实现某个效果而去尝试乱用写CSS属性，试的好成功了就临时用上，完全没有考虑为什么成功为什么其他不成功，也许当时成功的，可能因为一小点的偏差又不行了，没有一个很好的完整解决方案，直接是盲用状态，现在通过这一段时间的学习，自己也能比较深入的去了解一些效果属性实现的原理了，就比较不会像以前完全是瞎子摸象般迷芒了，当然了，这些原理光靠我现在阅读几遍书是没法完全搞懂的，需要在实践中不断练习总结的，只有通过实践运用才能更好的去理解；所以第二个收获是对CSS的相关属性有更加全面的认识；
接着是关于一些CSS效果的实现熟悉，《精通CSS》这本书，前三章先带我们熟悉回顾了一些基本的CSS属性及相关原理，后面就开始实践练习一些基本的CSS页面效果，自己也基本按照书上给出的实例代码实现了一番，看了这些实例，感觉还好，可真正自己去实现的时候，却觉得有种无从下手的感觉，只能说纸上得来总觉钱，绝知此事要躬行，确实，只有自己真正敲过那些代码，才知道，即使一个简简单单的实例，里面涉及的细节和一些原理上的东西是很多的，没有亲自动手，光看你是看不到的，虽然这个过程也许你会花费很多的时间，但是，你必须去完成这步，不然你会很迷茫，迷茫的感觉你白看了这本书一样，千万别以为自己看了几遍书，而不去桥一些实例代码自己就能完全掌握这些东西，没那么简单的，即使你当时理解了，可后面真正用上的时候，你又需要重新思考一番，还是要自己去实现一边，老话说的好，出来混总是要还的，所以倒不如刚开始就打好基础实践的，后面学起来会轻松些；所以第三收获是，自己对一些CSS组件的基本实现有了更系统的解决方案，并自己亲自实现了一番，也有代码的存档；
下面就把自己写的一些组件代码发布下，（很抱歉的是，有其他一部分因丢失没法呈现了，暂时只贴出一部分剩下的代码）：
**为标题添加图片项目
<!-- HTML代码 -->
<body>
<h1>hello world</h1>
</body>
/*CSS代码*/
h1{
/*background-color:blue;
background-image:url('me.PNG');
background-repeat: no-repeat;
background-position: left center;*/
/*等价于*/
background: blue url('me.PNG') no-repeat left center;
padding-left:50px;
width: 200px;
}截图：（标题图片）
PS：这边也可以用到一个图像替换技术，有利于搜索引擎的搜索；
text-indent: -500px;即这段CSS样式可利于文本负缩进；
**固定的圆角框1（无两侧边框）
<!-- HTML代码 -->
<body>
<div class="box">
<h2>Lorem Ipsum</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.
</p>
</div>
</body>/*CSS代码*/
.box{
width: 418px;
background: #effcef url('images/bottom.gif') no-repeat left bottom;
padding-bottom: 1px;
}
.box h2{
background: url('images/top.gif') no-repeat left top ;
/*background: url(images/top.gif) no-repeat left top;*/
margin-top:0px;
padding:20px 20px 0px 20px;
line-height: 1;
}
.box p{
padding: 0 20px;
}**（两侧有边框）
<!-- HTML代码 -->
<body>
<div id="box-posi">
<div class="box">
<h2>Lorem Ipsum</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.
</p>
</div>
</div>
</body>/*CSS代码*/
#box-posi{
position: absolute;
border: 1px solid red;
width: 1200px;
height: 1200px;
//透明度实现
background-color: rgba(1,1,1,0.1);
}
.box{
width: 424px;
background: url('images/tile2.gif') repeat-y ;
position: absolute;
left: 300px;
top: 100px;
}
.box h2{
background: url('images/top2.gif') no-repeat left top ;
padding:20px 20px 0px 20px;
margin-top: 0px;
}
.box p{
background: url('images/bottom2.gif') no-repeat left bottom ;
padding: 0px 20px 20px 20px;
margin-bottom: 0px;
}
<!-- HTML代码 -->
<body>
<div class="img-wrapper">
<img src="images/dunstan.jpg" alt="dunstan">
</div>
</body>
截图：（圆角框图片)
上面两个实例可实现垂直方向上的伸缩；（即改变文本大小时是垂直自动伸缩的）这也是通用的圆角制作方法，只不过需要自己制作圆角背景，比较麻烦PS：如果需要定位这个圆角框最好把他包围在一个DIV中，不然定位会出现问题，问题我现在还没解决；border-radius属性在ie，360下不兼容
**投影效果
<!-- HTML代码 -->
<body>
<div class="img-wrapper">
<img src="images/dunstan.jpg" alt="dunstan">
</div>
</body>
第一种：
/*CSS代码*/
第一种：
.img-wrapper{
background: url('images/shadow.gif') no-repeat bottom right;
/*通过浮动清除来实现“收缩包围的”效果*/
float: left;
clear: right;
/*width: 300px;
height: 300px;*/
}
.img-wrapper img{
background-color: #fff;
border: 1px solid #a9a9a9;
padding :4px;
margin: -2px 5px 2px -5px;
}
第二种（效果比较好）
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}截图：css2投影实现.jpg
**css3实现：
img{
box-shadow: 3px 3px 6px #666;
}截图：css3投影实现图
****内连接
<a name="mainContont">Lorem Ipsum</a>
<a href="#mainContont"> Lorem ipsum </a>**添加定制的图片项目符号
<!-- HTML代码 -->
<body>
<div class="nav">
<ul>
<li>home</li>
<li>about</li>
<li>our service</li>
<li>news</li>
</ul>
</div>
</body>
/*CSS代码*/
.nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.nav ul li {
padding-left: 21px;
background:url('images/bullet.gif') no-repeat left center;
margin-bottom: 10px;
}截图：（图片项目符号图）
*****创建基本的垂直导航条
<!-- HTML代码 -->
<body>
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">our service</a></li>
<li><a href="#">news</a></li>
<li class="last"><a href="#">contact</a></li>
</ul>
</body>
/*CSS代码*/
ul.nav{
margin:0px;
padding :0px;
list-style-type:none;
width: 120px;
background-color: #8BD400;
border :1px solid #486B02;
}
.nav a {
/*必须改为inline-block，原先舍得为block在ie6不兼容*/
display: inline-block ;
text-decoration: none;
color :#2B3F00;
border-top: 1px solid #E4FFD3;
border-bottom :1px solid #486B02;
background:url('images/bullet.gif') no-repeat left center;
padding-left: 30px;
width: 90px;
}
.nav .last a{
border-bottom:0;
}
.nav a:hover,.nav a:focus{
color :#E4FFD3;
background-color: #6DA203;
}
截图：垂直导航条图
*****创建简单水平导航条
<!-- HTML代码 -->
<body>
<ul class="nav">
<li class="prev"><a href="#">prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li ><a href="#">5</a></li>
<li class="next"><a href="#">next</a></li>
</ul>
</body>
/*CSS代码*/
ul.nav{
margin: :0px;
padding: 0px;
list-style-type: none;
}
ul.nav li {
float: left;
margin-right: 5px;
}
ul.nav li a {
display :block;
border :1px solid #ccc;
text-decoration: none;
/*background-color: red;*/
color :black;
}
ul.nav li a:hover,ul.nav li a:focus{
background-color: blue;
color:white;
}
ul.nav li.prev a,ul.nav li.next a {
border :none;
}
.prev{
padding-left: 21px;
background: url('images/bullet.gif') no-repeat left center;
}
.next{
padding-right: 21px;
background: url('images/bullet.gif') no-repeat right center;
}截图：简单水平导航条图
*****创建图形化导航条：
<!-- HTML代码 -->
<body>
<ul class="nav">
<li class="home"><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">our service</a></li>
<li><a href="#">news</a></li>
<li ><a href="#">contact</a></li>
</ul>
</body>
/*CSS代码*/
ul.nav {
margin:0px;
padding :0px;
list-style-type: none ;
width :490px;
background: #FAA819 url('images/mainNavBg.gif') repeat-x ;
/*用于处理浮动，使ul能够包围浮动的li*/
overflow: hidden ;
}
ul.nav li{
float :left;
}
ul.nav a {
display:block ;
text-decoration: none;
color :white;
line-height :22px;
padding :0px 20px;
background: url('images/divider.gif') no-repeat left center;
}
ul.nav li.home a {
background-image: none;
}
ul.nav li a:hover,ul.nav li a:focus{
color :red;
}截图：创建图形化导航条图
*****
下拉菜单 前面几个例子的综合练习：
<!-- HTML代码 -->
<body>
<ul class="nav">
<li class="home"><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li ><a href="#" class="ourservice">our service</a>
<ul>
<li><a href="#">contant</a></li>
<li><a href="#">development</a></li>
<li class="design"><a href="#">design</a></li>
</ul>
</li>
<li><a href="#">news</a></li>
<li ><a href="#">contact</a></li>
</ul>
</body>
/*CSS代码*/
ul.nav,ul.nav ul {
margin :0px;
padding :0px;
list-style-type :none;
background-color: #8BD400;
border:1px solid #486B02;
float :left;
}
ul.nav li {
width :100px;
float :left;
}
ul.nav li ul{
width :100px;
position :absolute;
left :-999px;
}
.nav li:hover ul{
left :auto;
}
.nav li a {
display :block;
color:black;
text-decoration: none ;
border-right :1px solid #486B02;
border-left: 1px solid #E4FFD3;
line-height:25px;
padding: 3px 20px;
}
.nav li a.ourservice {
padding:3px 2px ;
}
.nav li li a {
border-top: 1px solid #486B02;
border-bottom: 1px solid #E4FFD3;
border-right :0px;
border-left: 0px;
padding-left: 0px;
}
.nav li li.design a {
border-bottom: 0px;
}
ul a:hover,ul a:focus {
background-color: red;
color :white;
}
截图：
在ie7以下没法实现，因为hover伪类在非矛类元素上是不支持的那些浏览器；以后可以在javascript中实现
****表格练习 日历挂件
<!-- HTML代码 -->
<body>
<table class="cal">
<caption>
<a href="#" class="prev"><</a> Aprial 2014 <a href="#" class="next">></a>
</caption>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Tur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
</tr>
<tr>
<td><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td><a href="#">10</a></td>
<td><a href="#">11</a></td>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
<td><a href="#">15</a></td>
</tr>
<tr>
<td><a href="#">16</a></td>
<td><a href="#">17</a></td>
<td><a href="#">18</a></td>
<td><a href="#">19</a></td>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
<td><a href="#">22</a></td>
</tr>
<tr>
<td><a href="#">23</a></td>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
<td><a href="#">29</a></td>
</tr>
<tr>
<td><a href="#">30</a></td>
<td><a href="#">31</a></td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
</tr>
</tbody>
</table>
</body>/*CSS代码*/
table.cal{
border-collapse:separate;
border-spacing: 0;
text-align: center;
color: #333;
}
.cal th,.cal td {
margin :0px;
padding:0px;
}
caption {
font-size :18px;
padding-top: 7px;
padding-bottom: 7px;
background-color: #d4dde6;
font-weight: bold;
}
caption .prev{
float: left;
margin-left: 2px;
}
caption .next{
float: right;
margin-right: 2px;
}
caption a:link,caption a:visited{
text-decoration: none;
color: #333;
padding :0px 2px;
}
caption a:hover,caption a:focus{
background-color: #6d8ab7;
}
.cal thead th {
background-color: #d4dde6;
border-bottom: 1px solid #a9bacb;
font-size: 9px;
}
.cal tbody{
color :#a4a4a4;
background-color: #d0d9e2;
text-shadow:1px 1px 1px white;
}
.cal tbody td{
border-top: 1px solid #e0e0e1;
border-right:1px solid #9f9fa1;
border-bottom:1px solid #acacad;
border-left: 1px solid #dfdfe0;
}
.cal tbody a {
display:block;
text-decoration: none ;
color :#333;
background #c0c8d2;
font-weight: bold ;
padding :3px 6px 3px 6px;
}
.cal tbody a:hover,.cal tbody a:focus{
color :white;
background-color: #6d8ab7;
text-shadow:1px 1px 2px #22456b;
}**截图：日历图
****表单的简单竖直布局
<!-- HTML代码 -->
<body>
<fieldset>
<legend>Your Contant Detail</legend>
<div>
<label for="author">Name:<em class="required">(required)</em></label>
<input type="text" name="author" id="author" />
</div>
<div>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email"/>
</div>
<div>
<label for ="url">Web Address</label>
<input type="text" name="url" id="url"/>
</div>
<div>
<label for ="pas">Password</label>
<input type="password" name="pas" id="pas"/>
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text">Message:<em class="required">(required)</em></label>
<textarea name="text" id="text"></textarea>
</div>
</fieldset>
<fieldset id="remember-me">
<legend>Remember Me</legend>
<div>
<label for="remember-yes">
<input type="radio" id="remember-yes" class="radio" name="remember-yes" value="yes"/>Yes
</label>
</div>
<div>
<label for="remember-no">
<input type="radio" id="remember-no" class="radio" name="remember-no" value="no" checked="checked"/>No
</label>
</div>
</fieldset>
</body>
/*CSS代码*/
fieldset{
margin:0px;
padding :10px;
border :1px solid #ccc;
background-color: #f8f8f8;
}
legend{
font-weight: bold ;
}
label{
display:block ;
cursor :pointer;
}
input{
width :200px;
}
textarea{
width :100%;
height: 100px;
}
input.radio{
width: auto;
}
#remember-me .radio{
margin-right: 50px;
}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus{
background-color: #ffc;
}
input[type="text"],input[type="password"],textarea{
border-top:2px solid #999;
border-right:2px solid #999;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}
.required{
font-size: 7px;
color: #760000;
}***表单的简单水平布局
只需要把上面的代码适当修改如下：
label{
float :left ;
width :120px;
cursor :pointer;
}
div{
clear :left;
}
向左浮动，然后为了避免表单标签占多行而打乱布局，需要清除下div
*************表单布局案例模板：
<!-- HTML代码 -->
<body>
<fieldset class="detail">
<legend>Your Contant Detail</legend>
<div>
<label for="author">Name:<em class="required">(required)</em></label>
<input type="text" name="author" id="author" />
</div>
<div>
<label for="email">
Email Address:
<em class="feedback">邮箱验证错误，请重新输入</em>
</label>
<input type="text" name="email" id="email"/>
</div>
<div>
<label for ="url">Web Address</label>
<input type="text" name="url" id="url"/>
</div>
<div>
<label for ="pas">Password</label>
<input type="password" name="pas" id="pas"/>
</div>
<div>
<label for="dataOfBirth">Date of Birth</label>
<input type="text" name="dateOfBirth" id="dateOfBirth">
<select name="monthOfBirth" id="monthOfBirth">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
</select>
<input type="text" name="yearOfBirth" id="yearOfBirth">
</div>
<fieldset id="favoriteColor">
<h2>Favorite Color:</h2>
<div>
<p>
<input class="checkbox" id="red" name="red" type="checkbox" value="red" />
<label>red</label>
</p>
<p>
<input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />
<label>yellow</label>
</p>
<p>
<input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />
<label>pink</label>
</p>
<p>
<input class="checkbox" id="green" name="green" type="checkbox" value="green" />
<label>green</label>
</p>
</div>
<div>
<p>
<input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />
<label>orange</label>
</p>
<p>
<input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />
<label>purple</label>
</p>
<p>
<input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />
<label>blue</label>
</p>
<p>
<input class="checkbox" id="other" name="other" type="checkbox" value="other" />
<label>other</label>
</p>
</div>
<br class="clear" />
</fieldset>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text">Message:<em class="required">(required)</em></label>
<textarea name="text" id="text"></textarea>
</div>
</fieldset>
<fieldset id="remember-me">
<legend>Remember Me</legend>
<div>
<label for="remember-yes">
<input type="radio" id="remember-yes" class="radio" name="remember-yes" value="yes"/>Yes
</label>
</div>
<div>
<label for="remember-no">
<input type="radio" id="remember-no" class="radio" name="remember-no" value="no" checked="checked"/>No
</label>
</div>
</fieldset>
<fieldset>
<div>
<input type="submit" name="submit" class="submit" value="submit"/>
</div>
</fieldset>
</body>/*CSS代码*/
.clear {
clear: both;
}
fieldset{
margin:0px;
padding :10px;
border :1px solid #ccc;
background-color: #f8f8f8;
}
legend{
font-weight: bold ;
}
.detail div{
position :relative;
}
.feedback{
position:absolute;
left :340px;
top :5px;
font-weight: bold;
color: #760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
width :300px;
}
label{
float :left ;
width :120px;
cursor :pointer;
}
input{
width :200px;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
#dateOfBirth{
width :30px;
margin-right: 5px;
}
#monthOfBirth{
width :100px;
margin-right: 5px;
}
#yearOfBirth{
width :50px;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 120px;
float: left;
font-size: 16px;
font-weight: normal;
}
#favoriteColor div {
width: 120px;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
textarea{
width :100%;
height: 100px;
}
#remember-me .radio{
margin-right: 50px;
}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus{
background-color: #ffc;
}
input[type="text"],input[type="password"],textarea{
border-top:2px solid #999;
border-right:2px solid #999;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}
.required{
font-size: 7px;
color: #760000;
}
截图：表单布局模板图
****布局居中：
<!-- HTML代码 -->
<body>
<body>
<div class="wrapper"></div>
</body>
</body>
/*CSS代码*/
*{
margin :0px;
padding :0px;
}
.wrapper{
width :920px;
height :1000px;
background-color: red;
margin:0px auto;
}
*******
****关于外边距叠加问题的解释博文：
http://www.smallni.com/collapsing-margin/
****
ul li 与div相比 ，优势在哪儿，或则说性能差距
**********************************************************************************************
有些地方用ul和li，而不用div，主要有2个原因
1：使语义更加清晰，表示这个地方是用列表显示的
2：更加方便CSS的定义
比如，比较典型的导航菜单，结构是
<div id="nav_menu">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
<div>菜单项里的某个区块</div>
</div>
div表示这个区域是nav_menu，至于导航菜单里面的项，其实质是无序列表，所以用ul，li表示。可以很方便的区分li和菜单项里的某个区块
因此，如果要定义菜单的样式，可以这样写CSS
#nav_menu ul{
.....
}
要定义菜单项的样式：
#nav_menu ul li{
.....
}
如果全部用div，从显示上来说没什么坏处，不过对于代码结构和语义表达就不是很好了，你看
<div id="nav_menu">
<div class="menu_item">菜单项1</div>
<div class="menu_item">菜单项2</div>
<div class="menu_item">菜单项3</div>
<div>菜单项里的某个区块</div>
</div>
这样就区分不开 菜单项里的某个区块 了，同时，定义菜单项的CSS也很麻烦，你就需要给菜单项的div加上class属性了，这样就比较乱了。
*******************************************************************************
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
