1. 前言
通过使用 HTML + CSS 编写一个简易商城首页。 如图：
2. 布局思路
通过页面分析，大致可以决定页面的布局分为 5 大板块。
接下来，可以先定义页面的布局：
蘑菇街 - 你的剁手街
通过定义 5 个 div 将页面布局基本定义下来，接下来还是先定义页面详细的布局内容：
页面布局基本完成了， 接下来就是补充 css 样式。
蘑菇街 - 你的剁手街 item / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / itemLorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aliquid asperiores culpa cupiditate delectus, deserunt dolore eaque magnam maiores minima minus molestiae nihil placeat quae quaerat quos velit voluptas.你好，欢迎剁手.公告Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolor dolore maxime numquam quia, reprehenderit sint voluptatem? Cum dolorem illum laboriosam omnis reiciendis, ut. Asperiores deserunt laudantium nam repudiandae tempore?男装Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem natus quam quos. Consectetur consequatur deserunt iusto nostrum quidem! Cupiditate dolor est facere illo, ipsam nobis quibusdam vel! Amet, hic, repudiandae.
* { background-color: rgba(0,0,0,.1);}body { line-height: 1.7; font-size: 14px;}.left { float: left;}.right { float: right;}.container { max-width: 1080px; margin: 0 auto;}.clearf:before,.clearf:after { display: block; content: ''; clear: both;}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 { display: block; float: left;}.col-1 { width: 10%;}.col-2 { width: 20%;}.col-3 { width: 30%;}.col-4 { width: 40%;}.col-5 { width: 50%;}.col-6 { width: 60%;}.col-7 { width: 70%;}.col-8 { width: 80%;}.col-9 { width: 90%;}
3. 添加 CSS 样式及调整
蘑菇街 - 你的剁手街 蘑菇街item / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / itemitem / item
你好，欢迎剁手.公告Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolor dolore maxime numquam quia, reprehenderit sint voluptatem? Cum dolorem illum laboriosam omnis reiciendis, ut. Asperiores deserunt laudantium nam repudiandae tempore? reprehenderit sint voluptatem? Cum dolorem illum laboriosam omnis reiciendis, ut. Asperiores deserunt laudantium nam repudiandae tempore?男装女装
* { /*background-color: rgba(0,0,0,.1);*/ box-sizing: border-box; transition: background-color 200ms;}body { line-height: 1.7; font-size: 14px; background-color: #f9f9f9;}a { text-decoration: none;}img { float: left; width: 100%;}.left { float: left;}.right { float: right;}.container { max-width: 1080px; margin: 0 auto;}.clearf:before,.clearf:after { display: block; content: ''; clear: both;}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 { display: block; float: left;}.col-1 { width: 10%;}.col-2 { width: 20%;}.col-3 { width: 30%;}.col-4 { width: 40%;}.col-5 { width: 50%;}.col-6 { width: 60%;}.col-7 { width: 70%;}.col-8 { width: 80%;}.col-9 { width: 90%;}.top-nav { background-color: #eeeeee;}.top-nav .item { display: inline-block; color: #666; padding: 6px 10px;}.header { padding: 20px;}.header .logo { font-size: 30px;}.header .search-bar { border: 2px solid #dd182b; background-color: #dd182b;}.header .search-bar input,.header .search-bar button { float: left; padding: 10px; border: 0; outline: 0;}.header .search-bar input { width: 80%;}.header .search-bar button { width: 20%; background-color: #dd182b; color: #fff;}.header .search-bar input:focus { box-shadow: inset 0 0 2px 2px rgba(0,0,0,.2);}.header .search-bar button:hover { background-color: #ce1829;}.header .cart { text-align: center;}.header .cart .item { float: right; width: 80%; padding: 10px; border: 2px solid #eee; color: #dd182b;}.main-promote { background-color: #dedede;}.main-promote .cat { background-color: #6e6568;}.main-promote .cat .item { padding: 14px 20px; color: #fff;}.main-promote .cat .item:hover { background-color: rgba(0,0,0,.2);}.main-promote .info { padding: 10px; background-color: #fff; color: #888; box-shadow: 0 1px 2px rgba(0,0,0,.1);}.main-promote .info .avatar { float: left; display: inline-block; height: 50px; width: 50px; border-radius: 50%; background-color: #aaa; margin-right: 10px; margin-bottom: 10px;}.cat-promote .title:before { display: inline-block; content: ''; height: 22px; width: 5px; background-color: #dd182b; margin-right: 10px; vertical-align: middle;}.cat-promote .title { font-size: 22px;}.cat-promote .content .item { padding: 5px;}.cat-promote .content .card { height: 300px; background-color: #ccc; border-radius: 4px;}.footer { margin-top: 30px; padding: 30px 0; background-color: #eee; text-align: center; color: #999;}.footer a { color: #999;}
4. 总结
在编写 HTML 页面时，首先将页面整体的框架构建出来，不要一上来就写CSS，将整体的框架确定好了后，在进行小模块的编写。最后在通过css优化出来。