CSS网页设计实战——车辆购物页面
本文目标是实现如图的页面。
在进行分块时，很明显看到是分成了六个块，上面两个，下面四个。并分成左右两侧，并且第二层右边的三个小卡片比较类似。
<body>
<!--.main>.center>.f1>.left+.right-->
<div class="main"><div class="center"><div class="f1"><div class="left"></div><div class="right"></div></div><div class="f2"><div class="left"></div><div class="card"></div><div class="card"></div><div class="card card3"></div></div></div>
</div>
</body>然后把各个块的文字和图片加上，标题、简介、价格的文字大小、颜色不同应该分别在不同的类中。在第一层中，这些都应该属于p文字中，在插入图片时，应该使用src查找图片存放的路径。
<div class="f1"><div class="left"><div class="text"><p class="p_title">灵越 燃7000系列</p><p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存 <br>英特尔HD显卡620含共享显卡内存</p><p class="p_price">￥4999.00</p><a href="#">查看详情</a></div><img src="../day03/img/computer1.png" alt=""></div><div class="right"><div class="text"><p class="p_title">颜值 框不住</p><p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存 <br>英特尔HD显卡620含共享显卡内存</p><p class="p_price">￥6888.00</p><a href="#">查看详情</a></div><img src="../day03/img/computer2.png" alt=""></div></div>
看着是竖着排列，后续将在style设置样式的时候横着排列。
在第二层中，左侧的电脑办公是无序列表的链接，在电脑整机中有笔记本、游戏机、台式机、一体机、服务器、联想，这些都应该以超链接的形式放到一个无序链表中。而右边的三张卡片，用简单的p就行了。
<div class="f2"><div class="left"><div class="tit"><img src="../day03/img/icon.png" alt=""><span>电脑,办公/1F</span></div><div class="item_all"><p>电脑整机</p><ul><li><a href="#">笔记本</a></li><li><a href="#">游戏机</a></li><li><a href="#">台式机</a></li><li><a href="#">一体机</a></li><li><a href="#">服务器</a></li><li><a href="#">联想</a></li></ul><p>电脑配件</p><ul><li><a href="#">CPU</a></li><li><a href="#">SSD硬盘</a></li><li><a href="#">显示器</a></li><li><a href="#">显卡</a></li><li><a href="#">组装电脑</a></li><li><a href="#">机箱</a></li></ul><p>外设/游戏</p><ul><li><a href="#">键盘</a></li><li><a href="#">鼠标</a></li><li><a href="#">U盘</a></li><li><a href="#">移动硬盘</a></li><li><a href="#">游戏设备</a></li><li><a href="#">智能单车</a></li></ul></div></div><div class="card"><img src="../day03/img/computer3.png" alt=""><p class="p_intro">戴尔(DELL)XPS13-9360-R1609 13.3英<br>寸微边框笔记本电脑</p><p class="p_price">￥4600.00</p><a href="#">查看详情</a></div><div class="card"><img src="../day03/img/computer4.png" alt=""><p class="p_intro">戴尔(DELL)XPS13-9360-R1609 13.3英<br>寸微边框笔记本电脑</p><p class="p_price">￥5600.00</p><a href="#">查看详情</a></div><div class="card card3"><img src="../day03/img/computer3.png" alt=""><p class="p_intro">戴尔(DELL)XPS13-9360-R1609 13.3英<br>寸微边框笔记本电脑</p><p class="p_price">￥6600.00</p><a href="#">查看详情</a></div></div>
但是无序链表的前面还是会默认增加一个黑点，和我们的需求不符，那么就在style样式中可以删除。同时还应该将所有的内外边距设置为0.
<style>/************* 公共CSS **************/* { /* 去除所有元素自带的内外间距 */margin: 0;padding: 0;}a { /* 去除所有超链接自带的下划线 */text-decoration: none;}ul { /* 去除所有无序列表自带的标识符(·) */list-style: none;}.center { /* 设置版心:固定宽度,居中显示 */width: 1000px;margin: 0 auto;}
</style>在设置一楼样式时，遵循一个原则，就是有公共的部分提取到父类中，比如一楼的公共样式有设置底部边界为10px，禁止越界，越界就隐藏；而一楼左侧的公共样式它自身块的属性，包括大小、背景色等。一楼左侧的文字可以设置文字的宽高和位置，然后设置标题、简介、价格的样式。而且一层右边的文字也都可以设置为和左边的文字一样的样式，这样右边的工作量就大大减少了。
/************* 1F CSS **************/.f1 {overflow: hidden;margin-bottom: 10px;}/************* 1F左侧 CSS **************/.f1>.left {width: 611px;height: 376px;background-color: #e8e8e8;float: left;margin-right: 10px;position: relative;}.f1>.left>.text {width: 245px;height: 232px;/*background-color: pink;*/margin-top: 68px;margin-left: 36px;}.f1 .text>.p_title {font-size: 32px;color: #333;font-weight: lighter;margin-bottom: 12px;}.f1 .text>.p_intro {font-size: 12px;color: #666;font-weight: lighter;}.f1 .text>.p_price {font-size: 24px;color: #0aa1ed;font-weight: bold;margin-top: 24px;margin-bottom: 12px;}.f1 .text>a {display: block;width: 132px;height: 40px;background-color: #0aa1ed;color: #fff;text-align: center;line-height: 40px;border-radius: 5px;}.f1>.left>img {width: 318px;height: 319px;position: absolute;top: 35px;left: 265px;}/************* 1F右侧 CSS **************/.f1>.right {width: 375px;height: 376px;background-color: yellow;float: left;position: relative;}.f1>.right>.text {width: 245px;height: 245px;/*background-color: pink;*/margin-top: 39px;margin-left: 25px;}.f1>.right>img{position: absolute;left: 75px;top: 130px;width: 292px;height: 232px;}
接着处理第二层，还是按照上述原则，有相同的样式提取到父类。但二层还有个无序链表需要处理。
/************* 2F左侧 CSS **************/.f2>.left {width: 366px;height: 233px;background-color: pink;background-color: #e8e8e8;float: left;margin-right: 20px;}.f2>.left>.tit {background-color: #0aa1ed;height: 35px;position: relative;}.f2>.left>.tit>img {width: 29px;height: 20px;position: absolute;top: 8px;left: 10px;}.f2>.left>.tit>span {color: #fff;position: absolute;left: 49px;line-height: 35px;}.f2>.left>.item_all {padding-left: 12px;}.f2>.left>.item_all>p {font-size: 12px;color: #62b5ec;margin-top: 17px;margin-bottom: 9px;}.f2>.left>.item_all>ul {overflow: hidden;}.f2>.left>.item_all>ul>li {float: left;margin-right: 10px;}.f2>.left>.item_all>ul>li>a {font-size: 12px;color: #0aa1ed;}/************* 2F右侧 CSS **************/.f2>.card {width: 198px;height: 233px;background-color: #0aa1ed;background-color: #e8e8e8;float: left;margin-right: 8px;font-size: 12px;text-align: center;}.f2>.card3 {margin: 0;}.f2>.card>img{width: 100%;}.f2>.card>.p_intro{font-weight: lighter;}.f2>.card>.p_price{color: #0aa1ed;font-weight: bold;margin: 6px;}.f2>.card>a{display: block;width: 100px;height: 24px;background-color: #0aa1ed;margin: 0 auto;color: #fff;line-height: 24px;}
这样就完成了一个车辆购物的页面：
实现一个车辆购物页面 · 71796e2 · Admin/前端 - Gitee.com