广州网站设计服务商,东莞常平招聘网最新招聘信息,市场推广计划书,成都百度竞价推广一#xff0c;margin负值巧妙应用
二#xff0c;文字围绕浮动元素
三#xff0c;行内块
四#xff0c;CSS三角强化
五#xff0c;CSS初始化
一#xff0c;margin负值巧妙应用
制作盒子的细线边框#xff1a; 鼠标经过li后变色#xff1a; 二#xff0c;文字围绕…
一margin负值巧妙应用
二文字围绕浮动元素
三行内块
四CSS三角强化
五CSS初始化
一margin负值巧妙应用
制作盒子的细线边框 鼠标经过li后变色 二文字围绕浮动元素 三行内块 style* {margin: 0;padding: 0;}.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}/style
/head
bodydiv classboxa href#classprevlt;lt;上一页/aa href#classcurrent2/aa href#3/aa href#4/aa href#5/aa href#6/aa href# classelp.../aa href#classnextgt;gt;下一页/a到第input typetext页button确定/button/div
/body
/html
四CSS三角强化 .price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}/style
/head
bodydiv classbox1/divdiv classpricespan classmiaosha1650i/i/spanspan classorigin5650/span/div
/body
/html
五CSS初始化
CSS初始化是指重设浏览器的样式。每个网页必须首先进行CSS初始化 /* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0
}
/* em和i斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li的小圆点 */
li {list-style: none
}img {/* 照顾低版本浏览器 如果图片外面包含了链接会有边框问题 */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
}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
}
