详细网站设计需求表,有哪些做app的网站,宝坻集团网站建设,推广软件公司目录
1. 盒子模型
1.1 盒子模型布局
1.2 盒子模型组成
1.3 边框
1.4 表格细线边框
1.5 边框会影响盒子实际大小
1.6 内边距
1.7 外边距
1.8 外边距合并
1.9 清除内外边距
2. PS基本操作
3. 综合案例
3.1 案例1
3.2 案例2-快报模块
4. 圆角边框
5. 盒子阴影
6…
目录
1. 盒子模型
1.1 盒子模型布局
1.2 盒子模型组成
1.3 边框
1.4 表格细线边框
1.5 边框会影响盒子实际大小
1.6 内边距
1.7 外边距
1.8 外边距合并
1.9 清除内外边距
2. PS基本操作
3. 综合案例
3.1 案例1
3.2 案例2-快报模块
4. 圆角边框
5. 盒子阴影
6. 文字阴影了解 1. 盒子模型
1.1 盒子模型布局 1.2 盒子模型组成 1.3 边框 stylediv {width: 300px;height: 200px;/* 边框粗细 一般单位用px */border-width: 5px;/* 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 */border-style: dotted;/* 边框的颜色 */border-color: pink;}/style 具有重叠性所以一般先写大范围再写小范围 /* 得到的盒子为上边框粗细为2像素、实线、红色其余边框粗细为5像素、实线、蓝色 */ border: 5px solid blue; border-top: 2px solid red; /* 得到的盒子为边框粗细均为5像素、实线、蓝色 */ border-top: 2px solid red; border: 5px solid blue; 1.4 表格细线边框 styletable {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid red;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;text-align: center;}/stylebodytable aligncenter cellspacing0theadtrth排行/thth关键词/th/tr/theadtbodytrtd1/tdtdhhh/td/tr/tbody/table
/body
1.5 边框会影响盒子实际大小 1.6 内边距 padding-left: 5px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; 复合写法 如果盒子本身没有指定width/height属性则此时padding不会撑开盒子大小。 盒子内字数不一样多让padding撑开盒子——新浪导航案例。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;/* 文字居中对齐 */line-height: 41px;}div a {font-size: 12px;color: #4c4c4c;text-decoration: none;display: inline-block;padding: 0 20px;}div a:hover {background-color: #eee;color: #ff8500;}/style
/headbodydiva href#设为首页/aa href#手机新浪网/aa href#移动客户端/aa href#博客/aa href#微博/aa href#关注我/a/div/body/html 1.7 外边距 1.8 外边距合并
相邻块元素垂直外边距的合并 嵌套块元素垂直外边距的塌陷 1.9 清除内外边距 2. PS基本操作 3. 综合案例
3.1 案例1
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {/* 外边距 */margin: 0;/* 内边距 */padding: 0;}body {background-color: #f5f5f5;}.box {width: 298px;height: 415px;background-color: #fff;margin: 100px auto;}.box img {/* 图片宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 这个段落没有width属性 所以padding不会撑开盒子的宽度 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}/style
/headbodydiv classboximg src../img1.jpgp classreview快递牛整体不错蓝牙可以秒连。红米给力/pdiv classappraise来自于111用户的评价/divdiv classinfoh4Redmi AirDots真无线蓝…/h4em|/emspan99.9元/span/div/div
/body/html
总结 3.2 案例2-快报模块
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}li {/* 去掉li前面的小圆点 */list-style: none;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover {text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}/style
/headbodydiv classboxh3品优购快报/h3ullia href#【特惠】爆款耳机5折秒/a/lilia href#【特惠】母亲节健康好礼/a/lilia href#【特惠】爆款耳机5折秒/a/lilia href#【特惠】9.9元洗100张照片/a/lilia href#【特惠】长虹智能空调立省1000/a/li/ul/div
/body/html 4. 圆角边框 style/* 圆形的做法 */.yuanxing {width: 200px;height: 200px;background-color: pink;border-radius: 50%;}/* 圆角矩形的做法 */.yuanjiaojuxing {width: 600px;height: 200px;background-color: pink;border-radius: 100px;}/* 可以设置不同的圆角 */.radius {width: 200px;height: 200px;background-color: pink;border-radius: 10px 20px 30px 40px;}/style
5. 盒子阴影 6. 文字阴影了解
