CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布

SaltedFish00

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量201

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43176384/article/details/97924048

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、练习-表格斑马线

<html>
<style>
tr.first{
border-bottom-style:solid;
border-bottom-color:gray;
border-bottom-width:2px;
}
tr.odd{
border-bottom-style:solid;
border-bottom-color:gray;
border-bottom-width:1px;
background-color:lightgray;
}
tr.other{
border-bottom-style:solid;
border-bottom-color:gray;
border-bottom-width:1px;
}
td{
width:25%;
text-align:center;
}
table{
border-collapse:collapse;
width:50%;
}
</style>

<body>
<table border="0" align="center" >
<tr class="first">
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>

<tr class="odd">
<td>1</td>
<td >gareen</td>
<td>340</td>
<td>58</td>
</tr>

<tr class="other">
<td>2</td>
<td >teemo</td>
<td>320</td>
<td>76</td>
</tr>

<tr class="odd">
<td bgcolor="lightgray">3</td>
<td >annie</td>
<td>380</td>
<td>38</td>
</tr>

<tr class="other">
<td>4</td>
<td >deadbrother</td>
<td>400</td>
<td>90</td>
</tr>

</table>
</body>
</html>

在这里插入图片描述
二、练习-美人尖

<style>
div{
border-top-style:solid;
border-top-color:red;
border-top-width:20px;
border-left-style:solid;
border-left-color:white;
border-left-width:20px;
border-right-style:solid;
border-right-color:white;
border-right-width:20px;
width:0px;
height:20px;}
</style>
<div></div>

在这里插入图片描述
三、练习-断线下划线

<style>
table{
border-collapse:collapse;
width:90%;
}
td.one{
border-bottom-style:solid;
border-bottom-color:#AFEEFF;
border-bottom-width:4px;
width:24%;
text-align:center;
}
td.blank{
width:1%;
}
</style>

<table border="0">
<tr>
<td class="one">商品</td>
<td class="blank"></td>
<td class="one">数量</td>
<td class="blank"></td>
<td class="one">价格</td>
<td class="blank"></td>
<td class="one">小记</td>
</tr>
</table>

在这里插入图片描述

四、练习-下拉菜单风格

<style>
a{
text-decoration:none;
color:Blue;
}
div.menu{
width:80px;
margin-left:70px;
margin-top:15px;
border:1px gray solid;
position:absolute;
}
div.menu a{
display:block;
color:gray;
text-font:宋体；
padding:10px;
text-decoration: none;  /*虽然在a中已声明，但是此处不写，padding无法实现*/
padding:10 0 10 15;
}
a:hover{
background-color:lightgrey;
}
</style>

<a href="#nowhere">武器</a>
<a href="#nowhere">护甲</a>
<a href="#nowhere">英雄</a>

<div class="menu">
<a href="#nowhere">盖伦</a>
<a href="#nowhere">提莫</a>
<a href="#nowhere">安妮</a>
<a href="#nowhere">死哥</a>
</div>

在这里插入图片描述
五、综合练习1

<style>
div.head{
position:absolute;
width:640px;
padding-bottom:10px;
border-bottom:gray solid 1px;

}

.left {
float:left;
}
.right{
float:right;
}
.b{
padding-top:35px;
margin-left:60px;
font-size:70%;
}

</style>

<div class="head">
<img style="margin-top:2px" class="left" src="1.png"/>
<span style="margin-left:15px;font-family:楷体;font-weight:bold;color:gray">最新动态</span>
<span class="right" style="padding-left:2px;font-family:楷体;color:gray">设置</span>
<img  class="right" style="margin-top:2px" src="2.png"/>
</div>
<br/>

<div class="left">
<img  style="padding:15 15 10 4" src="4.png" >
<br>
<span style="background-image:url(5.png);padding:5px;color:gray">6551</span>
</div>

<span class="left" style="margin-top:15px;text-align:right;font-family:楷体;color:gray">热门回答，来自  机械  <span style="color:blue">关注话题</span></span>
<img class="right"  style="margin-top:18px" src="3.png">
<br/><br/>
<span style="font-size:100%;color:skyblue;family-font:楷体;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
<br/>
<span style="font-size:80%;family-font:楷体"><span style="font-weight:bold">Vincent Fu, </span>Materials Science, PhD</span>
<br/>

<div style="width:740px">
<div class="left" style="margin-top:10px"><img src="6.png"></div>
<div class="left" style="font-size:100%;width:370px;margin-left:7px;padding-top:5px">说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... <span style="color:blue">显示全部 </span></div></div><br/><br/>

<div class="b">
<img src="7.png">
关注问题
<img src="8.png" style="margin-left:5px">
867条评论
<img src="9.png" style="margin-left:5px">
作者保留权利</div>

<div style="width:640px;margin-top:20px;border:solid lightgrey 0.5px;"></div>

在这里插入图片描述
六、综合练习2

<style>
div.back{
white-space: nowrap;/*就算内部div超过宽度也不换行*/
/*display:inline-block；用了后左侧最上部margin无效*/
position:absolute;
background-color:dimgray;
width:650px;
height:470px;
}
div.left{
position:absolute;
/*absolute后无用display:inline-block；*/
font:left;
background-color:black;
margin-top:5px;
margin-left:5px;
width:200px;
height:450px;
}
div.right{
position:absolute;
/*display:inline-block；*/
font:left;
background-color:black;
margin-top:6px;
margin-left:225px;
width:410px;
height:450px;
}
.text{
color:white;
font-size:85%;
}
tr.lefttext{
color:white;
font-size:50%;
line-height:13px;/*文字居中*/
}
.righttext{
color:orange;
font-size:50%
}
.pic{
width:45px;
height:45px;
border:solid 0.5px dimgray;
padding:1px;
margin-top:5px;
}
</style>

<html>
<body>
<div class="back">
<div class="left" >
<br/>
<div class="text" align="center" >英雄资料</div>
<table class="choose" border="0" width="200" style="margin-top:10px">
<tr class="lefttext">
<td><input type="checkbox">坦克</td>
<td><input type="checkbox">法师</td>
<td><input type="checkbox">刺客</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">辅助</td>
<td><input type="checkbox">新手</td>
<td><input type="checkbox">近战</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">远程</td>
<td><input type="checkbox">推进</td>
<td><input type="checkbox">打野</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">后期</td>
<td><input type="checkbox">潜行</td>
<td><input type="checkbox">战士</td>
</tr>
</table>
<p class="righttext" style="border-bottom:dashed dimgray 0.5px;padding-bottom:5px">英雄价格:</p>

<table class="choose" border="0" width="200" style="margin-top:10px">
<tr class="lefttext">
<td><input type="checkbox">6300</td>
<td><input type="checkbox">4800</td>
<td><input type="checkbox">3120</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">1350</td>
<td><input type="checkbox">450</td>
<td></td>
</tr>
</table>


<div class="text" align="center" >物品资料</div>
<table class="choose" border="0" width="200" style="margin-top:10px">
<tr class="lefttext">
<td><input type="checkbox">生命值</td>
<td><input type="checkbox">攻击速度</td>
<td><input type="checkbox">护甲穿透</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">暴击</td>
<td><input type="checkbox">法术穿透</td>
<td><input type="checkbox">魔性抗性</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">法术伤害</td>
<td><input type="checkbox">物理伤害</td>
<td><input type="checkbox">消耗品</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">韧性</td>
<td><input type="checkbox">法力值</td>
<td><input type="checkbox">生命偷取</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">冷却缩减</td>
<td><input type="checkbox">生命回复</td>
<td><input type="checkbox">附魔</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">法力回复</td>
<td><input type="checkbox">法属吸血</td>
<td><input type="checkbox">移动速度</td>
</tr>
<tr class="lefttext">
<td><input type="checkbox">护甲值</td>
<td></td>
<td></td>
</tr>
</table>
<div class="text" align="center" >符文资料</div>
</div>

<!--清理所有div格式，慎用<div style="clear:both"></div>-->
<div class="right">
<table class="righttext" border=0 width=410px>
<tr align="center">
<td><img class="pic" src="0.jpg"/></td>
<td><img class="pic" src="1.jpg"/></td>
<td><img class="pic" src="2.jpg"/></td>
<td><img class="pic" src="3.jpg"/></td>
<td><img class="pic" src="4.jpg"/></td>
<td><img class="pic" src="5.jpg"/></td>
<td><img class="pic" src="6.jpg"/></td>
<tr align="center">
<td>牛头首长<br/> 阿利斯塔</td>
<td>钢铁大使<br/> 波比</td>
<td>殇之木乃伊<br/> 阿木木</td>
<td>冰晶凤凰<br/> 艾尼维亚</td>
<td>黑暗之女<br/> 安妮</td>
<td>寒冰猎手<br/>艾希</td>
<td>蒸汽机器人<br/>布里茨</td>
</tr>
<tr align="center">
<td><img class="pic" src="0.jpg"/></td>
<td><img class="pic" src="1.jpg"/></td>
<td><img class="pic" src="2.jpg"/></td>
<td><img class="pic" src="3.jpg"/></td>
<td><img class="pic" src="4.jpg"/></td>
<td><img class="pic" src="5.jpg"/></td>
<td><img class="pic" src="6.jpg"/></td>
<tr align="center">
<td>牛头首长<br/> 阿利斯塔</td>
<td>钢铁大使<br/> 波比</td>
<td>殇之木乃伊<br/> 阿木木</td>
<td>冰晶凤凰<br/> 艾尼维亚</td>
<td>黑暗之女<br/> 安妮</td>
<td>寒冰猎手<br/>艾希</td>
<td>蒸汽机器人<br/>布里茨</td>
</tr>
<tr align="center">
<td><img class="pic" src="0.jpg"/></td>
<td><img class="pic" src="1.jpg"/></td>
<td><img class="pic" src="2.jpg"/></td>
<td><img class="pic" src="3.jpg"/></td>
<td><img class="pic" src="4.jpg"/></td>
<td><img class="pic" src="5.jpg"/></td>
<td><img class="pic" src="6.jpg"/></td>
<tr align="center">
<td>牛头首长<br/> 阿利斯塔</td>
<td>钢铁大使<br/> 波比</td>
<td>殇之木乃伊<br/> 阿木木</td>
<td>冰晶凤凰<br/> 艾尼维亚</td>
<td>黑暗之女<br/> 安妮</td>
<td>寒冰猎手<br/>艾希</td>
<td>蒸汽机器人<br/>布里茨</td>
</tr>
<tr align="center">
<td><img class="pic" src="0.jpg"/></td>
<td><img class="pic" src="1.jpg"/></td>
<td><img class="pic" src="2.jpg"/></td>
<td><img class="pic" src="3.jpg"/></td>
<td><img class="pic" src="4.jpg"/></td>
<td><img class="pic" src="5.jpg"/></td>
<td><img class="pic" src="6.jpg"/></td>
<tr align="center">
<td>牛头首长<br/> 阿利斯塔</td>
<td>钢铁大使<br/> 波比</td>
<td>殇之木乃伊<br/> 阿木木</td>
<td>冰晶凤凰<br/> 艾尼维亚</td>
<td>黑暗之女<br/> 安妮</td>
<td>寒冰猎手<br/>艾希</td>
<td>蒸汽机器人<br/>布里茨</td>
</tr>
<tr align="center">
<td><img class="pic" src="0.jpg"/></td>
<td><img class="pic" src="1.jpg"/></td>
<td><img class="pic" src="2.jpg"/></td>
<td><img class="pic" src="3.jpg"/></td>
<td><img class="pic" src="4.jpg"/></td>
<td><img class="pic" src="5.jpg"/></td>
<td><img class="pic" src="6.jpg"/></td>
<tr align="center">
<td>牛头首长<br/> 阿利斯塔</td>
<td>钢铁大使<br/> 波比</td>
<td>殇之木乃伊<br/> 阿木木</td>
<td>冰晶凤凰<br/> 艾尼维亚</td>
<td>黑暗之女<br/> 安妮</td>
<td>寒冰猎手<br/>艾希</td>
<td>蒸汽机器人<br/>布里茨</td>
</tr>
</table>
</div>
</div>
</body>
</html>

在这里插入图片描述
七、综合练习3

<style>
.text{
font-size:80%
}
.index{
color:DarkSlateBlue;
font-weight:bold;
font-size:90%;
background-color:lightblue;
padding:2px;
}
.line{
width:90%;
border-bottom:lightblue 2px solid;

}
</style>

<html>
<body>
<p class="text" style="color:red">请注意：带有"*"的项目必须填写.</p>
<table width="600px" style="border:1px lightblue solid;">
<tr>
<td class="index" colspan="3" ">请填写您的用户名:</td>
</tr>

<tr style="font-size:80%">
<td width="120px"><span style="color:red">*</span>通行证用户名：</td>
<td width="180px"><input size="16" type="password" placeholder="请输入用户名"><br/>
<a href="#nowhere">查看用户名是否被占用</td>
<td align="left" style="background-color:WhiteSmoke;padding:2px">用户名由a~z的英文字母（不区分大小写）、0~9的数字、<strong>点</strong>、<strong>减号</strong>或<strong>下划线</strong>组成，长度为3~18个字符，只能以数字或者字母开头和结尾，例如：kyzy_001。</td>
</tr>

<tr>
<td class="index" colspan="3">请填写安全设置:<span style="font-weight:normal">(安全设置用于验证账号和找回密码）</span></td>
</tr>

<tr>
<td colspan="3" style="color:red;font-size:80%;">以下信息对保证您账号的安全极为重要，请您务必认真填写.</td>
</tr>

<tr align="center" style="font-size:80%">
<td><span style="color:red">*</span>输入登陆密码：<br/><span style="color:red">*</span>登陆密码确认：</td>
<td ><input size="16" type="password"><br/><p style="margin:5px"></p><input size="16" type="password"><p style="margin:5px"></p></td>
<td style="background-color:WhiteSmoke;padding:2px">密码长度为6~16位，区分字母大小写，登陆密码可以由字母、数字、特殊字符组成.【<a href="nowhere">更多说明</a>】</td>
</tr>
<tr><td align="center" class="line" colspan="3"></td></tr>

<tr align="center" style="font-size:80%;border-top:1px lightblue solid;">
<td><span style="color:red">*</span>密码提示问题：<br/><span style="color:red">*</span>密码提示回答：</td>
<td ><input size="16" type="password"><br/><p style="margin:5px"></p><input size="16" type="password"><p style="margin:5px"></p></td>
<td style="background-color:WhiteSmoke;padding:2px">当您忘记密码时可以由此找回密码。例如，问题是“<strong>我的哥哥是谁？</strong>”，答案为“petter2”。问题长度<strong>不大于36</strong>个字符，一个汉字占两个字符。<strong>答案长度在6~30</strong>位之间，区分大小写。【<a href="nowhere">更多说明</a>】</td>
</tr>
<tr><td align="center" class="line" colspan="3"></td></tr>

<tr align="center" style="font-size:80%;border-top:1px lightblue solid;">
<td><span style="color:red">*</span>输入安全码：<br/><span style="color:red">*</span>安全码确认：</td>
<td ><input size="16" type="password"><br/><p style="margin:5px"></p><input size="16" type="password"><p style="margin:5px"></p></td>
<td align="left" style="background-color:WhiteSmoke;padding:2px">安全码是您找回密码的<strong>重要</strong>途径，安全码长度为<strong>6~16</strong>位，区分字母大小写，由字母、数字、特殊字符组成， <span class="red">特别提醒：安全码一旦设定，将不可自行修改</span>【<a href="nowhere">更多说明</a>】</td>
</tr>
<tr><td align="center" class="line" colspan="3"></td></tr>

<tr height="40px">
<td align="center" colspan="3" ><input type="button" value="提交表单"></td>
</tr>


</table>
</body>
</html>

在这里插入图片描述