学习2
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角</title>
<style>
/* 作用：设置元素的外边框为圆角。 */
/* 属性名：border-radius */
/* 属性值：数字+px/百分比 */
/* 提示：属性值是圆角半径 */
img {
width: 200px;
height: 200px;
/* 最大值是50%超过没有效果 */
/* border-radius: 50%; */
/* 圆形：设置属性值为宽高的一半 只有正方形的盒子能实现*/
border-radius: 100px;
}
div {
/* margin: 50px auto;
width: 200px;
height: 200px; */
/* background-color: orange; */
/* border-radius: 20px; */
/* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */
/* 左上，右上 右下 左下 */
/* border-radius: 10px 20px 30px 40px; */
/* 左上 右上+左下 右下 */
/* border-radius: 10px 30px 80px; */
/* 左上+右下 右上+左下 */
/* border-radius: 10px 40px; */
/* width: 200px; */
/* height: 80px; */
/* background-color: gold; */
/* 胶囊形状：长方形，设置属性值为高度的一半能够实现 */
/* border-radius: 40px; */
/* 阴影：作用：给元素设置阴影效果 */
/* 属性名box-shadow */
/* 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 */
/* X轴偏移量和Y轴偏移量必须书写 */
/* 默认是外阴影，内阴影需要添加inset */
margin: 50px auto;
width: 200px;
height: 80px;
background-color:orange;
/* 外阴影 */
/* box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5); */
/* 内阴影 */
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset;
}
</style>
</head>
<body>
<img src="./images/1.png" alt="">
<div></div>
</body>
</html>
综合案例产品卡片
<!-- CSS书写顺序：
1.
盒子模型属性
2.文字样式
3.圆角、阴影等修饰属性 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品卡片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
.product {
margin: 50px auto;
padding-top: 40px;
width: 270px;
height: 253px;
background-color: #fff;
text-align: center;
border-radius: 10px;
}
.product h4 {
margin-top: 20px;
margin-bottom: 12px;
font-size: 17px;
color: #333;
font-weight:400;
}
.product p {
font-size: 12px;
color: #555;
}
</style>
</head>
<body>
<div class="product">
<img src="./images/liveSDK.svg" alt="">
<h4>抖音直播sdk</h4>
<p>包含抖音直播看播功能</p>
</div>
</body>
</html>
综合案例新闻列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻列表</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
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: 0;
}
.news .hd a {
margin-top: -1px;
display:block;
border-top:3px solid #ff8400;
border-right:1px solid #dbdee1;
width:48px;
height:34px;
background-color:#fff;
text-align: center;
line-height: 32px;
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;
background-position: 0 center;
}
.news .bd li a {
padding-left: 15px;
background: url(./images/img.gif) no-repeat 0 center;
font-size: 12px;
color: #f1f1f1;
}
</style>
</head>
<body>
<div class="news">
<div class="hd"><a href="#">新闻</a></div>
<div class="bd">
<ul>
<li><a href="#">点整“新农人”温暖的伸手</a></li>
<li><a href="#">在希塑的田野上</a></li>
<li><a href="#">“中国天眼”又有新发现已在《自然》杂志发表</a></li>
<li><a href="#">急！这个领域，缺人！月蒜4万元还不好招！啥情况？</a></li>
<li><a href="#">“带货”背后：亏损面持续扩大。竞手环境新列</a></li>
<li><a href="#">多地力推二手房“带押过户"+有什么好处？</a></li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号