使用工具: vscode,ps cs6,iconfont 图标 ( https://www.iconfont.cn/ ),ico 图标转换 ( http://www.bitbug.net/ )
效果图:
步骤:
(1) 新建 images,CSS,fonts,JS 文件来存放对应代码
(2) 将涉及图片放在 images 文件夹
(3) 将 normalize.CSS 放在 CSS 文件夹
normalize.CSS 有下面这几个目的:
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式: 为大部分 HTML 元素提供
修复浏览器自身的 bug 并保证各浏览器的一致性
优化 CSS 可用性: 用一些小技巧
解释代码: 用注释和详细的文档来
(4) 新建首页的网页 index.HTML
(5) 引入 iconfont 图片, 生成 iconfont.CSS
(5) 新建 base.CSS, 完成首页的基础部分样式
(6) 新建 index.CSS, 完成首页的核心部分样式
完整代码将存放在 https://github.com/Linqueme
完成要点
(1) 确定版心
也就是确定网页主要内容的大体范围, 在 base.CSS 生成公共类便于引用
该案例版心:
具体代码为: 生成一个宽度为 1190px, 居中对齐的公共类
- .w{
- width: 1190px;
- margin: 0 auto;
- }
(2) 取消默认样式
属性为具体说明时会才用默认样式, 例, ul,li 自带边距. 会在写的过程中产生影响, 正确做法是取消默认样式
不建议用
- *{
- padding:0;
- margin:0;
- }
因为该选择器的优先权重最小为 (0,0,1), 很容易被覆盖而不产生效果.
推荐在 base.CSS 中具体说明
该案例所涉及的为
- ul,h1,input,p,button,h5,dt,dd,dl,span
- {
- padding: 0;
- margin: 0;
- }
- input,button{
- /* 取消默认边框 */
- border: 0;
- /* 取消轮廓边框 */
- outline: none;
- }
- ul{
- list-style: none;
- }
- /* 取消下划线 和基本样式 */
- a{
- text-decoration: none;
- color: #999;
- font-size: 12px;
- }
(3) 图片的基线对齐方式
- img{
- /* display: block; */
- /* 图片会基线对齐, 会存在小间隙, 方法一, display:block 但有可能会掉下来 */
- vertical-align: top;
- /* 方法二, 改变基线对齐方式, 解决图片底侧有空白间隙问题 , 不能和 display: block 同在, 因为是行内块元素 */
- }
(4) 文字的居中对齐
- text-align:center;// 水平居中
- line-height:xxpx;// 垂直居中, XX 为对应的高度
(5) 块级元素的居中对齐
采用定位的方法来避免计算和为防以后数据改变后要查询计算
父元素 {
- position:relative(主要)/absolute;
- }
居中元素 (子元素){
- // 垂直居中
- position:absolute;
- top:50%;// 为父高度
- transform: translateY(-50%);// 为自身高度
- // 水平居中
- margin:0 auto;
- }
(6) 装饰用的 | 写法
1<span>|</span>
将其视为字体进行样式修改
2<div></div>
生成具体的类来实现
- div{
- height:10px;
- width:1px;
- background:#ccc;// 因为本身里面没有字体元素, 所以 color 无效
- }
3 设置为边框一侧 (常用于多 li 处)
- li{
- border-right:1px solid #ccc;
- }
(7) 混乱布局
在 XX 范围内里面布局不是常规形式, 一般用定位来布局
(8) 阴影样式
在 logo 处有向上的阴影
box-shadow: 2px -10px 10px rgba(0, 0, 0, .3);// 水平偏移, 垂直偏移, 阴影模糊程度, 背景色
向上为 - px, 正常向下为 + px
(9) 关于 a 的大小和排列问题
在案例中 a 作为链接是以不同的形式伴随出现, 如 li,img,div 等
因为 a 为行内元素, width 和 height 不起作用.
所以关于 a 的大小修改方法为
1 display:block;
将 a 变成块级元素, 因为会变成块级元素, 所以多个 a 不会像以前一样水平排列, 而会独占一行垂直排列
2 dissplay:inline-block;
将 a 变成行内块元素, 同时具有行内和块级元素特性, 即是可以对大小进行改变又能在同一行显示
(10) 提升引擎搜索优化
例: 在 logo 的链接处本身为一图片, 但为提高搜索引擎权重, 使 logo 包在 < h1 > 内
- <div class="logo">
- <h1>
- <!-- 提高权重, 有利于搜索引擎优化 -->
- <a href="#"></a>
- </h1>
- </div>
(11) 版心内三列水平布局
- 1:
- div1,div2,div3{
- float:left;
- }
然后用 padding 或 margin 来使它们之间产生空隙. 但之间距离要精确计算, 避免超过父宽度后面盒子被挤下去. 或者最后盒子右边留有空隙, 使父盒子看起来变短
- 2:
- div1,div2{
- float:left;
- }
- div3{
- float:right;
- }
使一二盒子向左浮动, 三盒子向右浮动, 只需计算第一条空隙, 免除上面的烦恼.
(12) 盒子内二列水平布局
1: 使 2 个子盒子分别向左, 向右浮动
2: 使 2 个子盒子向左浮动, 计算他们之间空隙
3: 特殊情况特殊方法
在案例登录处:
左边图片, 右边文字
- /* 京东写法 * 不左右浮动, 只给文字盒子, 图片采用定位 */
- <div class="login-t">
Hi, 欢迎来到京东! <br/>
- <!-- 有省略. 效果 -->
- <a href="#">
- 登录
- </a>
- <a href="#">
- 注册
- </a>
- <a href="#" class="user-info">
- <img src="images/images/no_login.jpg">
- </a>
- </div>
生成一个盒子刚好包裹文字
- // 文字部分, 这里作为父盒子让图片定位
- .login-t{
- width: 95px;
- height: 60px;
- line-height: 20px;
- font-size: 12px;
- white-space: nowrap;
- /* 强制一行显示 */
- overflow: hidden;
- /* 超出隐藏 */
- text-overflow: ellipsis;
- /* 省略号 */
- color: #666;
- padding-left: 60px;
- /* 这里把文字挤过来 */
- position: relative;
- }
- // 图片部分
- .user-info{
- position: absolute;
- width: 50px;
- height: 50px;
- left: 0;
- top: 0;
- background: url("../images/images/[email protected]") no-repeat -70px 0;
- /* 如果在父使用 border-radius, 而在子有显示的话, 外加 overflow:hidden */
- }
(13) 文字超出省略且具有省略号
- white-space: nowrap;
- /* 强制一行显示 */
- overflow: hidden;
- /* 超出隐藏 */
- text-overflow: ellipsis;
- /* 省略号 */
(14) 精灵图
多个图标集合在一张图, 提高搜索效率
- // 第一个图标
- .expand a{
- display: block;
- margin: 0 auto;
- margin-top: 30px;
- width: 24px;
- height: 24px;
- background:url("../images/images/[email protected]") no-repeat 0 0 ;
- }
- // 后续图标
- .expand .a2{
- background-position: -44px 0;
- }
- // 只需改变精灵图里面的定位位置即可
(15) 不在版心内的不固定位置, 随页面移动一起移动
在本案例中为左侧广告栏随三列的第一列一起移动
在第一列内新建 div 来容纳广告栏图片, 然后对齐采用定位方式
(16) 图片出现的动画效果
在本案例中有移动到广告栏后其右侧出现图片
可以采用图片 display:none; 然后广告栏 hover 后图片 display:block;
但该效果在一瞬间完成, 不是很美观
使用 css3 的动画效果来改变
- .ad:hover .ad-r{
- width: 990px;// 图片最终宽度
- }
- .ad-r{
- position: absolute;
- top: 0;
- left: 250px;
- z-index: 2;// 防止被盖住
- width: 0;
- height: 480px;// 为防止其按比例大小出现而不是从左到右出现, 先设置好高端
- /* 这个图片做动画, 所以给它过渡效果 */
- transition: all 0.8s;
- }
(17) 清除浮动带来的影响
1 子盒子浮动
父盒子 {
- overflow:hidden;
- }
只要是父元素即可, 不强求最最近的父元素
2 新建伪类元素
- xx:after{
- clear:both;
- }
3 一般父盒子不给高度, 让里面的子盒子撑开, 所以不清楚浮动会有影响,
清除浮动是为了解决子有浮动而父没有高度造成的变异, 给父亲高度即可不用清除浮动.
父盒子 {
height:xx;
}
(18) 转义字符的 fontweight 好像无效 (待确定)
(19) 加了绝对定位, 浮动, 固定定位的行内元素, 直接给高度, 不用转换
(20) 盒子宽度计算
width 为内容宽度, 不是实际宽度
box-sizing:border-box;
使 width: 变成实际宽度包含 padding,concent,border, 不用担心给了 padding,border 撑开盒子宽度
(21) 去掉最右边 li 右边边框
1 设置好 ul 宽度, 使 li 排列异常隐藏
- ul{
- overflow:hidden;
- }
2 倍数 li 去边框
- expand li:nth-of-type(4n){
- border-right: 0;
- }
(23)ico 图标获得方法
在对应官网网址后加上 favicon.icon
如京东 https://www.jd.com/favicon.ico
下载该图片后到 http://www.bitbug.net/
对图片进行转换.
注意该图片后缀为 ico 是正确的, 且要将它放在根目录而不是 images 文件夹内
记得在 index.HTML 中进行引用
(24)iconfont 图标获得方法
打开 https://www.iconfont.cn/
选择需要的图标进行下载
将 iconfont.CSS 放入 CSS 文件夹内, 下载包其余文件放在 fonts 文件夹内
记得 index.CSS 内进行引用
其中除此方法外还有在线引用官网链接不用卸载, 但是需要在服务器上进行,
在本地进行引用只会出现小方块.
有错误欢迎指出
来源: http://www.bubuko.com/infodetail-3133759.html