如何用css和html制作一个页面 - 细节
这个一节讲的是如何一比一还原设计稿。在布局一节里面，我们有三张图，现在一比一做成html。也算是css+html的终章。过程中还是使用css3，不再特别说明css版本。
用文字来描述一个页面的开发过程，确实比较痛苦。尽量在代码中添加注释。以下是首页的css文件内容和首页html文件内容。
index.html
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="/favicon.ico"><title>首页 - 我的博客</title><meta name="keywords" content="我的博客"/><meta name="description" content="我的博客简介。"/><link href="assets/styles/global.css" rel="stylesheet" type="text/css"> <!-- 引入全局css --><link href="assets/styles/index.css" rel="stylesheet" type="text/css"> <!-- 引入当前页面css --></head><body><!-- 一般性的代码规范里，一般不使用id做样式控制，样式控制都是用class来实现 --><div class="layout"><div class="left"><div class="userinfo"><span class="char">w</span></div><!-- 左侧菜单：开始 --><nav class="main-nav"><ul><li><a href="#"><i class="icon icon-book"></i><span>文集</span></a></li><li><a href="#"><i class="icon icon-doc"></i><span>文档</span></a></li><li><a href="#"><i class="icon icon-commit"></i><span>评论</span></a></li><li><a href="#"><i class="icon icon-setting"></i><span>设置</span></a></li></ul></nav><!-- 左侧菜单：结束 --></div><div class="center"><!-- 中间标题：开始 --><div class="center-title"><div class="inner"><i class="icon icon-book-1"></i><h1>前端学习笔记</h1><button><i class="icon icon-search"></i></button></div></div><!-- 中间标题：结束 --><!-- 中间菜单：开始 --><nav class="sub-nav"><ul><!-- normal current组合控制第一个菜单的颜色 --><li class="normal current"><a href="list.html"><strong>html</strong><span class="num">20</span></a></li><li class="normal"><a href="list.html"><strong>css</strong><span class="num">12</span></a></li><li class="normal"><a href="list.html"><strong>javascript</strong><span class="num">3</span></a></li><li class="normal"><a href="list.html"><strong>vue</strong><span class="num">0</span></a></li><li class="normal"><a href="list.html"><strong>react</strong><span class="num">6</span></a></li><li class="normal"><a href="list.html"><strong>webpack</strong><span class="num">34</span></a></li><li class="normal"><a href="list.html"><strong>nodejs</strong><span class="num">21</span></a></li></ul></nav><!-- 中间菜单：结束 --><!-- 版权：开始 --><div class="copy">Copyright © totonoo.com</div><!-- 版权：结束 --></div><div class="right"><!-- 首页：开始 --><div class="index-main"><!-- item：开始 --><div class="item"><h2><strong>html</strong><a href="list.html">更多</a></h2><div class="item-list"><ul><li><a href="article.html" title="LaTeX数学公式语法大全">LaTeX数学公式语法大全</a><span class="date">2020-06-05</span></li><li><a href="article.html" title="CSS动画是可以暂停的">CSS动画是可以暂停的</a><span class="date">2020-04-04</span></li><li><a href="article.html" title="chrome translation闪烁BUG">chrome translation闪烁BUG</a><span class="date">2020-03-15</span></li><li><a href="article.html" title="canvas小tip-下载二维码、图片加水印">canvas小tip-下载二维码、图片加水印</a><span class="date">2020-03-08</span></li><!-- 设计稿上，如果标题过长用 ... 代替，所以需要用title属性来显示全文，鼠标移到连接上看效果 --><li><a href="article.html" title="巧用CSS3的calc()宽度计算做响应模式布局，长长长">巧用CSS3的calc()宽度计算做响应模式布局，长长长</a><span class="date">2020-02-10</span></li></ul></div></div><!-- item：结束 --><div class="item"><h2><strong>CSS</strong><a href="list.html">更多</a></h2><div class="item-list"><ul><li><a href="article.html" title="LaTeX数学公式语法大全">LaTeX数学公式语法大全</a><span class="date">2020-06-05</span></li><li><a href="article.html" title="CSS动画是可以暂停的">CSS动画是可以暂停的</a><span class="date">2020-04-04</span></li><li><a href="article.html" title="chrome translation闪烁BUG">chrome translation闪烁BUG</a><span class="date">2020-03-15</span></li><li><a href="article.html" title="canvas小tip-下载二维码、图片加水印">canvas小tip-下载二维码、图片加水印</a><span class="date">2020-03-08</span></li><!-- 设计稿上，如果标题过长用 ... 代替，所以需要用title属性来显示全文，鼠标移到连接上看效果 --><li><a href="article.html" title="巧用CSS3的calc()宽度计算做响应模式布局，长长长">巧用CSS3的calc()宽度计算做响应模式布局，长长长</a><span class="date">2020-02-10</span></li></ul></div></div><div class="item"><h2><strong>JAVASCRIPT</strong><a href="list.html">更多</a></h2><div class="item-list"><ul><li><a href="article.html" title="LaTeX数学公式语法大全">LaTeX数学公式语法大全</a><span class="date">2020-06-05</span></li><li><a href="article.html" title="CSS动画是可以暂停的">CSS动画是可以暂停的</a><span class="date">2020-04-04</span></li><li><a href="article.html" title="chrome translation闪烁BUG">chrome translation闪烁BUG</a><span class="date">2020-03-15</span></li><li><a href="article.html" title="canvas小tip-下载二维码、图片加水印">canvas小tip-下载二维码、图片加水印</a><span class="date">2020-03-08</span></li><!-- 设计稿上，如果标题过长用 ... 代替，所以需要用title属性来显示全文，鼠标移到连接上看效果 --><li><a href="article.html" title="巧用CSS3的calc()宽度计算做响应模式布局，长长长">巧用CSS3的calc()宽度计算做响应模式布局，长长长</a><span class="date">2020-02-10</span></li></ul></div></div><!-- 当没有数据的时候用这种样式展示 --><div class="item"><h2><strong>VUE</strong></h2><div class="item-list"><ul><li class="empty">暂无数据</li></ul></div></div></div><!-- 首页：结束 --></div></div></body></html>
global.css
@charset "utf-8";/* reset 开始 */html, body {width: 100%;height: 100%;margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #ffffff;font-family: "Open Sans", Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "微软雅黑", "STHeiti", SimSun, sans-serif; /* 设置字体 */color: #666666; /* 设置全局文字颜色 */line-height: 180%; /* 设置文字行高 */}/* 设置链接文本 *//* 默认状态 */a {color: #26b192;text-decoration: none;transition: color 300ms; /* 设置连接的交互动画 */}/* 默认状态 访问过的状态 */a:link, a:visited {color: #26b192;text-decoration: none}/* 移上的状态 */a:hover {color: #015845;}/* 按下的状态 */a:active {color: #015845}/* 去掉链接图片的边框 */img {border: 0;}/* 重置下列元素 */ul, ol, li, dl, dd, dt, h1, h2, h3, h4, h5, h6 {margin: 0;padding: 0;list-style: none;}/* 重置表单元素 */input, select, button, textarea {font-family: "Open Sans",Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei","微软雅黑","STHeiti",SimSun,sans-serif;color: #666666;}input::placeholder, select::placeholder, button::placeholder, textarea::placeholder {color: #999999}/* reset 结束 *//* css颜色的表示方式有 #ffffff：白色 rgb(255, 255, 255)：白色 rgba(255,255,255, 0.6)：白色带0.6的透明度 *//* 布局 */.layout {width: 100%;height: 100%;display: flex;}.left {width: 72px;background-color: #26b192;}.center {width: 489px;border-right: 1px #e6ecf1 solid;background-color: #f5f7f9;display: flex;flex-direction: column;}.right {flex: 1; /* 除去left和center的宽度，剩余部分全部分给right */height: 100%;overflow: auto; /* 自动显示滚动条，若内容的宽度和高度超过了元素的宽度和高度则显示滚动条，否则不显示 overflow-x 为横向，overflow-y 为纵向*/}.userinfo {padding: 15px;}.userinfo .char {width: 42px; /* 元素宽度 */height: 42px; /* 元素宽高度 */display: block; /* 内联元素转换成块级元素 */border-radius: 100%; /* 圆角 如果宽和高相等 100% 表示圆形，不相等则是椭圆 */background-color: #e4e4e4; /* 背景颜色 */text-transform: uppercase; /* 文本大写 */color: #26b192; /* 文本颜色 */font-size: 18px; /* 文本大小 */text-align: center; /* 对齐方式：居中 */line-height: 42px; /* 文本行高 */}.main-nav {padding-top: 10px;}.main-nav a {display: block; /* 内联元素转换成块级元素，独占一行 */color: #e4e4e4; /* 文本颜色 */text-align: center; /* 对齐方式：居中 */transition: all 300ms; /* 状态切换时，动画效果 */padding: 10px 0;}.main-nav a:hover {background-color: rgba(0,0,0, 0.24);}.main-nav a span {display: block;}/* 雪碧图做图标 */.icon {width: 36px;height: 36px;background-image: url(../images/icon.png); /* 背景图片 */background-repeat: no-repeat; /* 背景的平铺方式：不平铺 */display: inline-block; /* 保留内联元素和块级元素的特点 */}.icon-book {background-position: -18px -18px; /* 定位背景：以背景图的左上为原点，设置x轴，y轴的距离 */}.icon-doc {background-position: -90px -18px;}.icon-commit {background-position: -162px -18px;}.icon-setting {background-position: -234px -18px;}.icon-book-1 {background-position: -306px -18px;}.icon-search {background-position: -378px -18px;}.sub-nav {flex: 1;padding: 30px 0 30px 160px;}.sub-nav .normal {border-bottom: 1px #e6ecf1 solid;}.sub-nav .normal a {display: block;line-height: 46px;display: flex;text-transform: uppercase;color: #666666;}.sub-nav .normal a:hover {background-color: rgba(0,0,0, 0.04); /* 鼠标移上去时的样式 */}.sub-nav .normal strong {flex: 1;font-weight: normal;padding-left: 5px;}.sub-nav .normal .num {font-size: 14px;color: #cccccc;padding: 0 30px;}.sub-nav .current a {color: #26b192;}.center-title {padding-left: 160px;}.center-title .icon-book-1 {width: 52px;height: 52px;background-color: #26b192;border-radius: 4px;background-position: -294px -12px;margin-left: 5px;}.center-title .inner {border-bottom: 1px #e6ecf1 solid;display: flex;align-items: center;padding: 25px 0;}.center-title h1 {flex: 1;font-size: 18px;font-weight: normal;padding-left: 15px;}.center-title button {border: 0;background: no-repeat;cursor: pointer;padding: 0 30px;}.copy {text-align: center;font-size: 12px;padding: 10px 0;color: #999999;}
index.css
@charset "utf-8";.index-main {padding: 30px; /* 内容和边框之间的空白 */display: grid; /* 网格布局 */grid-gap: 30px; /* 网格间隙 */grid-template-columns: 50% 50%; /* 一排放俩 */margin-right: 30px; /* 边框与边框之间的空白 */}.index-main .item {box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* 阴影 */border: 1px rgb(220, 220, 220) solid; /* 线框 */box-sizing: border-box; /* 设置盒子模式 */}.index-main .item h2 {border-bottom: 1px rgb(220, 220, 220) solid; /* 下方线条 */line-height: 52px; /* 文本行高 */padding: 0 30px;display: flex;font-weight: normal; /* 去掉加粗 */}.index-main .item h2 strong {flex: 1;text-transform: uppercase; /* 设置文字大写 */font-size: 18px;}.index-main .item h2 a {font-size: 16px;}/* 添加更多前面的 + 放在css里面，便于统一控制 */.index-main .item h2 a::before {content: "+";}.index-main .item-list {padding: 30px;}/* li的布局 */.index-main .item-list li {display: flex;}/* 链接 */.index-main .item-list li a {flex: 1;overflow: hidden; /* 溢出隐藏 */text-overflow: ellipsis; /* 隐藏的文字用 ...代替 */white-space: nowrap; /* 文字不换行，一般这3个属性是一套效果，缺一不可 */}/* 日期 */.index-main .item-list li .date {font-size: 14px;color: #cccccc;padding-left: 15px;}/* 空样式覆盖默认的li的样式 */.index-main .item-list .empty {width: 100%;font-size: 14px;color: #cccccc;justify-content: center;}
更多文件内容查看github仓库：https://github.com/myestorm/examples.git。