东の抽象生活 - css
type: channel
link: https://chouxiang.life/index.php/tag/css
items: 品优购项目案例学习day4
items: html+css标签使用及书写规范
items: 品优购项目案例学习day3
items: 品优购项目案例学习day2
items: 品优购项目案例学习day1

品优购项目案例学习day4
type: item
date: 2020-05-12T19:21:00+08:00
description: 书再再接上文，首页模块制作完成后，开始制作商品列表界面，新建list.html，同样的进行SEO优化，修改TDK。并引入base.css,common.css和新建的list.css。 品优购商城-正品低价、品质保障、配送及时、轻松购物！ 将头部的html布局直接粘贴过来： 品优购欢迎您！ 请登录 免费注册 我的订单 我的品优购 品优购会员 企业采购 关注品优购 客户服务 网站导航 品优购商城 搜索 优惠购首发 亿元优惠 9.9团购 每满99-30 办公用品 电脑 通信 我的购物车 99+ 接下来做nav导航栏模块 品优秒杀 即将售罄 超值低价 女装 女鞋 男装 男鞋 母婴童装 食品 智能数码 运动户外 更多分类 css代码如下：.sk { position: absolute; border-left: 1px solid #c81523; top: 40px; left: 190px; padding-left: 14px; padding-top: 3px; }[scode type="yellow"]这里将list,li左侧浮动[/scode].sk_list { float: left; } .sk_list ul li { float: left; } .sk_list ul li a { display: block; font-size: 16px; font-weight: 700; line-height: 47px; color: #000; padding: 0 30px; }[scode type="yellow"]这里将con右侧浮动[/scode].sk_con { float: right; } .sk_con ul li { float: left; } .sk_con ul li a { display: block; font-size: 14px; line-height: 49px; padding: 0 20px; }[scode type="yellow"]这里用伪元素选择器::after引入符号[/scode].sk_con ul li:last-child a::after { content: "\e91e"; font-family: icomoon; margin-left: 2px; }浏览器效果如下：接下来做商品模块，非常的简单，用ul>li，我拿之前做好的复制粘贴进来即可 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 css代码如下：[scode type="yellow"]这里的bd模块设置了溢出隐藏，宽度不够时也可以使元素在一行显示[/scode].sk_bd { width: 1300px; overflow: hidden; }[scode type="yellow"]transition: all .3s使所有的变换效果有0.3秒的过渡效果[/scode].sk_bd ul li { float: left; margin-right: 3px; width: 298px; height: 550px; background-color: #ffffff; border: 1px solid transparent; transition: all .3s; }…

html+css标签使用及书写规范
type: item
date: 2020-05-04T01:33:00+08:00
description: 一、html规范1.块级元素div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul...特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，不设置宽度，宽度是它的容器的100%，除非设定一个宽度。功能：主要用来搭建网站架构、页面布局、承载内容。2.行内元素span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var...特点：和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变。功能：用于加强内容显示,控制细节，例如：加粗、斜体等。1)块级元素与块级元素平级、内嵌元素与内嵌元素平级 // × span是行内元素，p是块级元素 // √2)块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素 3)有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素h1、h2、h3、h4、h5、h6、p、dt4)块级元素不能放在标签p里面5)li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器二、CSS规范1.命名空间规范(了解)1.布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。2.状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。3.工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。4.组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。5.钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。2.CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)3.CSS书写规范使用CSS缩写属性，CSS有些属性是可以缩写的，比如padding，margin，font等等，这样精简代码同时又能提高用户的阅读体验。4.去掉小数点前的“0”5.连字符CSS选择器命名规范1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？输入的时候少按一个shift键；浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）；能良好区分JavaScript变量命名（JS变量命名是用“_”）6.字符小写定义的选择器名，属性及属性值的书写皆为小写。在xhtml标准中规定了所有标签、属性和值都小写，CSS书写也应该遵循此约定。7.选择器当一个规则包含多个选择器时，每个选择器独占一行。、+、~、> 选择器的两边各保留一个空格。8.代码注释单行注释：星号与内容之间必须保留一个空格。多行注释星号要一列对齐，星号与内容之间必须保留一个空格。规则声明块内注释使用 // 注释，// 后面加上一个空格，注释独立一行。.foo{ border: 0; // .... }文件注释文件顶部必须包含文件注释，用@name标识文件说明。星号要一列对齐，星号与内容之间必须保留一个空格，标识符冒号与内容之间必须保留一个空格。 /** * @name: 文件名或模块名 * @description: 文件或模块描述 * @author: author-name(mail-name@domain.com) * author-name2(mail-name2@domain.com) * @update: 2015-04-29 00:02 */@description为文件或模块描述。@update为可选项，建议每次改动都更新一下。当该业务项目主要由固定的一个或多个人负责时，需要添加@author标识，一方面是尊重劳动成果，另一方面方便在需要时快速定位责任人。9.不要随意使用IDid在JS是唯一的，不能多次使用，而使用class类选择器却…

品优购项目案例学习day3
type: item
date: 2020-05-03T23:54:00+08:00
description: 书再接上文，接下来做首页的焦点图，也叫轮播图，不过实现轮播需要JavaScript来实现。布局如下： 没什么好说的，注意边距及左侧浮动就好，css代码如下：.main { width: 980px; height: 455px; margin-left: 220px; margin-top: 10px; } .main .focus { float: left; width: 721px; height: 455px; }浏览器效果如下：接下来是快报栏模块，标题用h5标签，整体用ul>li，加粗用strong标签，布局如下： 品优购快报 更多 【特惠】 备战开学季 全民半价购数码 【公告】 品优稳占家电网购六成份额 【特惠】 百元中秋全品类礼券限量领 【公告】 上品优生鲜 享阳澄湖大闸蟹 【特惠】 每日享折扣 品优品质游 css代码如下：.main .newsflash { float: right; width: 250px; height: 455px; } .main .newsflash .news { height: 165px; width: 250px; border: 1px solid #e4e4e4; } .main .newsflash .news_hd { height: 33px; line-height: 33px; border-bottom: 1px dotted #e4e4e4; padding: 0 15px; } .main .newsflash .news_hd h5 { font-size: 14px; float: left; }[scode type="yellow"]这里.more用的伪元素选择器::after，并且用了定位（子绝父相原则），让arrow居中更好看一些。[/scode].main .newsflash .news_hd .more { position: relative; float: right; } .main .newsflash .news_hd .more::after { position: absolute; font-size: 14px; font-family: 'icomoon'; content: '\e920'; } .main .newsflash .news_bd { padding: 5px 15px 0; }[scode type="yellow"]注意这里的小li使用了溢出隐藏，并让溢出的内容显示为省略号。[/scode].main .newsflash .news_bd ul li { height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }浏览器效果如下：接下来是生活服务模块和促销模块，ul>li实现，布局如下： 话费 机票 电影票 游戏 彩票 加油卡 酒店 火车票 众筹 理财 礼品卡 白条 每行最后一个小li的右边框溢出，所以.lifeservice中使用了溢出隐藏，css代码如下：.main .lifeservice { overflow: hidden; height: 209px; width: 250px; border: 1px solid #e4e4e4; border-top: 0px; } .main .lifeservice ul { width: 252px; } .main .lifeservice ul li { position: relative; float: left; width: 63px; height: 71px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; text-align: center; }[scode type="yellow"]注意这里一般情况下，当a包含有宽度的盒子，a转换为块级元素。[/scode].main .lifeservice ul li a { display: inline-block; width: 63px; height: 71px; }[scode type="yellow"]这里的小图片也是用了简单的定位（子绝父相原则）。[/scode].main .lifeservice ul li img { position: absolute; top: -1px; right: -1px; }[scode type="yellow"]利用小i标签插入精灵图，精灵图依然可以使用JavaScript的for循环实现，但这里仍然…

品优购项目案例学习day2
type: item
date: 2020-05-01T22:14:00+08:00
description: 书接上文，接下来做导航栏模块，用ul>li标签布局如下： 全部商品分类 家用电器 手机、数码、通信 电脑、办公 家居、家具、家装、厨具 男装、女装、童装、内衣 个护化妆、清洁用品、宠物 鞋靴、箱包、珠宝、奢侈品 运动户外、钟表 汽车、汽车用品 母婴、玩具乐器 食品、酒类、生鲜、特产 医药保健 图书、音像、电子书 彩票、旅行、充值、票务 理财、众筹、白条、保险 css代码如下：.nav { height: 47px; border-bottom: 2px solid #b1191a; } .nav .dropdown { float: left; width: 210px; height: 45px; background-color: #b1191a; } .nav .navitems { float: left; } .nav .dropdown .dt { width: 100%; height: 100%; font-size: 16px; text-align: center; line-height: 45px; color: #fff; margin-top: 2px; }[scode type="yellow"]注意这里display:none，是为了一会做footer时更方便[/scode].nav .dropdown .dd { /* display: none; */ width: 210px; height: 465px; background: #c81623; } .nav .dropdown .dd ul li { position: relative; height: 31px; font-size: 14px; line-height: 31px; padding-left: 10px; margin-left: 2px; } .nav .dropdown .dd ul li:hover { background: #fff; }[scode type="yellow"]注意这里用伪元素选择器::after，并用定位子绝父相原则（其实用float:right也可以实现）。[/scode].nav .dropdown .dd ul li::after { position: absolute; top: 1px; right: 10px; font-family: 'icomoon'; content: '\e920'; color: #fff; font-size: 14px; } .nav .dropdown .dd ul li a { color: #fff; } .nav .dropdown .dd ul li:hover a { color: #e60012; }浏览器效果如下：紧接着做导航栏项目模块，整体布局如下： 服装城 美妆馆 品牌超市 全球购 闪购 团购 拍卖 有趣 css代码如下：.nav .navitems ul li { float: left; } .nav .navitems ul li a { display: block; height: 45px; line-height: 45px; font-size: 16px; padding: 0 25px; }基本没什么难度和要注意的地方，就是左侧浮动和调整内边距及一些基本属性，浏览器效果如下：接下来将.nav .dropdown .dd的display值写为none，使其隐藏，不影响我们接下来写底端的footer模块，footer模块内分为service、help、copyright三个小模块，先写service模块。 正品保障 正品保障，提供发票 极速物流 极速物流，极速送达 无忧售后 7天无理由退换货 特色服务 私人定制家电套餐 帮助中心 您的购物指南 也没什么好说的，用的ul>li写就可以。css代码如下：.footer { height: 415px; background-color: #f5f5f5; padding-top: 30px; } .mod_service { height: 80px; border-bottom: 1px solid #ccc; } .mod_service ul li { float: left; width: 240px; height: 50px; padding-left: 35px; } .mod_service h5 { float: left; width: 50px; height: 50px; background: url(../images/icons.png) no-repeat -252px -2px; margin-right: 8px; }[s…

品优购项目案例学习day1
type: item
date: 2020-04-29T21:36:00+08:00
description: 新项目学习计划！启动！新建项目文件夹，并新建css fonts images js upload文件夹和index.html。针对搜索引擎进行SEO优化，修改TDK。 品优购商城-正品低价、品质保障、配送及时、轻松购物！ 在css文件夹下导入base.css，新建common.css，并引入ico（ico生成）及初始化css和通用css。 base.css代码如下： /* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle } button { /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #c81623 } button, input { /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; border: 0px; outline: none; } body { /* CSS3 抗锯齿形 让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666 } .hide, .none { display: none } /* 清除浮动 */ .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 } [scode type="yellow"]其中btn int为此次修改。[/scode] button, input { /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; border: 0px; outline: none; } 在common.css引入icomoon字体，并将fonts文件夹粘贴至项目根目录下。 @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?tomleg'); src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }导航栏整体布局： 品优购欢迎您！ 请登录 免费注册 我的订单 我的品优购 品优购会员 企业采购 关注品优购 客户服务 网站导航 css代码如下（写在通用common.css里）： .w { width: 1200px; margin: 0 auto; } .fl { float: left; } .fr { float: right; } .style_red { color: #c81623; } .shortc…