如何用css和html制作一个页面 - 细节

vlambda
2020-07-08

如何用css和html制作一个页面 - 细节

这个一节讲的是如何一比一还原设计稿。在布局一节里面，我们有三张图，现在一比一做成html。也算是css+html的终章。过程中还是使用css3，不再特别说明css版本。

用文字来描述一个页面的开发过程，确实比较痛苦。尽量在代码中添加注释。以下是首页的css文件内容和首页html文件内容。

index.html

<!DOCTYPE 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 &copy; 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;}