东芝复印机181,理疗,哑王爷
由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用div+css来对页面进行优化
表格布局的缺陷
html的块标签:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> .logo{ float: left; width: 33%; /*border-width: 1px; border-style: solid; border-color: red;*/ height: 60px; line-height: 60px; /* border: 1px solid red;*/ } .amenu{ color: white; text-decoration: none; height: 50px; line-height: 50px; } .product{ float: left; text-align: center; width: 16%; height: 240px; } </style> </head> <body> <!-- 1. 创一个最外层div 2. 第一部份: logo部分: 嵌套三个div 3. 第二部分: 导航栏部分 : 放置5个超链接 4. 第三部分: 轮播图 5. 第四部分: 6. 第五部分: 直接放一张图片 7. 第六部分: 抄第四部分的 8. 第七部分: 放置一张图片 9. 第八部分: 放一堆超链接 --> <div> <!--2. 第一部份: logo部分: 嵌套三个div--> <div> <div class="logo"> <img src="../img/logo2.png"/> </div> <div class="logo"> <img src="../img/header.png"/> </div> <div class="logo"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <!--清除浮动--> <div style="clear: both;"></div> <!--3. 第二部分: 导航栏部分 : 放置5个超链接--> <div style="background-color: black; height: 50px;"> <a href="#" class="amenu">首页</a> <a href="#" class="amenu">手机数码</a> <a href="#" class="amenu">电脑办公</a> <a href="#" class="amenu">鞋靴箱包</a> <a href="#" class="amenu">香烟酒水</a> </div> <!--4. 第三部分: 轮播图--> <div> <img src="../img/1.jpg" width="100%"/> </div> <!--5. 第四部分:--> <div> <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div> <!--左侧广告图--> <div style="width: 15%; height: 480px; float: left;"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </div> <!-- 右侧商品 --> <div style="width: 84%; height: 480px;float: left;"> <div style="height: 240px; width: 50%; float: left;"> <img src="../products/hao/middle01.jpg" height="100%" width="100%" /> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> </div> </div> <!--6. 第五部分: 直接放一张图片--> <div> <img src="../products/hao/ad.jpg" width="100%"/> </div> <!--7. 第六部分: 抄第四部分的--> <div> <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div> <!--左侧广告图--> <div style="width: 15%; height: 480px; float: left;"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </div> <!-- 右侧商品 --> <div style="width: 84%; height: 480px;float: left;"> <div style="height: 240px; width: 50%; float: left;"> <img src="../products/hao/middle01.jpg" height="100%" width="100%" /> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> </div> </div> <!--8. 第七部分: 放置一张图片--> <div> <img src="../img/footer.jpg" width="100%"/> </div> <!--9. 第八部分: 放一堆超链接--> <div style="text-align: center;"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br /> copyright © 2005-2016 传智商城 版权所有 </div> </div> </body> </html>
css的优先级
按照选择器搜索精确度来编写: 行内样式 > id选择器 > 类选择器 > 元素选择器
就近原则: 哪个离得近,就选用哪个的样式
css中的其它选择器
元素选择器: 标签的名称{}
类选择器: 以. 开头 .类的名称
id选择器: 以#开头 , #id的名称 (id必须是页面上面唯一)
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
属性选择器:
a[title] a[titile='aaa'] a[href][title] a[href][title='aaa']
后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
子元素选择器: 父选择器 > 儿子选择器
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*请将h1下面的所有 em 元素 的内容颜色改成 红色*/ /*中间以空格隔开的是后代选择器*/ /*后代选择器 h1 em{ color: red; }*/ h1 > em{ color: red; } </style> </head> <body> <h1> this is a <em>儿子</em> <strong> <em>孙子</em> </strong> heading </h1> </body> </html>
a:link {color: red} /* 未访问的链接 */ a:visited {color: #00ff00} /* 已访问的链接 */ a:hover {color: #ff00ff} /* 鼠标移动到链接上 */ a:active {color: #0000ff} /* 选定的链接 */
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
网友评论