网站空间2000m多少钱,网站推广优化建设,做美工好的网站,建设银行国际互联网网站是什么结构为类选择器 伪元素选择器 PxCook 盒子模型 (内外边距#xff0c;边框#xff09; 内外边距合并#xff0c;塌陷问题 元素溢出 圆角 阴影: 模糊半径#xff1a;越大越模糊#xff0c;也就是越柔和 案例一#xff1a;产品卡片 !DOCTYPE html
html lang边框 内外边距合并塌陷问题 元素溢出 圆角 阴影: 模糊半径越大越模糊也就是越柔和 案例一产品卡片 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title产品卡片/titlestyle*{margin: 0;padding: 0;box-sizing:border-box;/*不希望撑大盒子启动内减模式*/}body{background-color:#f1f1f1;}.product{margin: 50px auto;/* 因为内容都是居中显示所以直接添加padding效果 */padding: 40px;width: 270px;height: 253px;background-color: #fff;text-align: center;border-radius:10px;}.product h4{margin-top: 20px;margin-bottom: 12px;font-size: 18px;color: #333;font-weight:400;}.product p {font-size:12px;color: #555;}/style
/head
bodydiv classproductimg src./images/image.png alth4抖音直播SKD/h4p包含抖音直播刊播功能/p/div
/body
/html 案例二新闻列表 清除默认样式 所有标签内外边距内减防止因为内边距和边框将盒子撑大 完成整个大盒子以及新闻框盒子样式 大盒子 外边距左右设置为 auto让整个大盒子居中显示 新闻框盒子 新闻框盒子作为大盒子的儿子宽度是一样的不必再设置新闻框左边边框是没有的新闻框中链接标签 a: 想要贴近新闻框-1px 往下 a标签是行内元素跟span标签一样设置宽高不显示所以display转换为块级元素 同样该 块 右边没有边框 完成内容模块类bdli标签中包含 a 标签 方形点和图片作为背景图 方形点作为整个 li 标签背景图左内边距空出来正好显示方形点图片作为 a 标签内容的背景图片 左内边距空出来正好显示图片 单个属性复合属性背景图平铺方式放置位置 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title新闻列表/titlestyle*{margin: 0;padding: 0;box-sizing: border-box;}li{/* 将li标签的项目符号清除掉 */list-style:none;}a{/* 将a标签的下划线清除掉 */text-decoration: none;}.news{margin: 100px auto;width: 360px;height: 200px;/* background-color: pink; */}.news .hd{height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: none;}.news .hd a{/* -1盒子向上移动 */margin-top: -1px;/* a标签是行内元素加宽高不生效 *//* div块标签默认是父级元素的百分百那么宽度直接省略 */display: block;border-top: 3px solid #ff8400;border-right: 1px solid #bddee1;width: 48px;height: 34px;background-color: #fff;text-align: center;line-height: 34px;font-size: 14px;color: #333;}.news .bd{padding: 5px;}.news .bd li{padding-left: 15px;background-image: url(./images/square.png);background-repeat: no-repeat;/* 背景图位置水平设置为0垂直设置为center */background-position: 0 center;}.news .bd li a{padding-left: 20px;background:url(./images/img.gif) no-repeat 0 center;font-size: 12px;color: #666;}.news .bd li a:hover{color:#ff8400;}/style
/head
body!-- 新闻区域 包含标题 和 内容 --div classnews!-- 标题 --div classhda href新闻/a/div!-- 内容 --div classbdullia href#点赞新农人温暖的伸手/a/lilia href#在希望的田野上/a/lilia href#中国天眼又有新发现/a/lilia href#急这个领域缺人/a/lilia href#G9带货后亏损面积持续扩大/a/lilia href#多地方推二手房/a/li/ul/div/div/body
/html
