在千锋逆战班的第48天学习中，学员孙华建深入研究了HTML与CSS的高级应用，包括样式设置、背景属性、图片尺寸控制、列表样式、边框效果、圆角边框、盒子模型、定位属性、伸缩布局等，并通过多个案例进行实践。
千锋逆战班：孙华建
在千锋学习第48天
“未来的你会感谢今天奋斗的自己”
今天我学习了java课程，HTML之CSS的高级应用
#中国加油！武汉加油！千锋加油！也为自己加油！！！#…
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>情书案例</title>
<!--
标题：字号3em，颜色红色，居中，楷体
内容：字号1.2em，颜色黑色，居左，宋体，首行缩进2em，行高2em，字符间距0.1em
-->
<style type="text/css">
#title {
font-size: 3em;
color: red;
text-align: center;
font-family: "楷体";
}
#content {
font-size: 1.2em;
color: black;
text-align: left;
font-family: "宋体";
text-indent: 2em;
line-height: 2em;
letter-spacing: 0.1em;
}
</style>
</head>
<body>
<p id="title">写给你的10封情书</p>
<p class="content">第一封 外面风大 跟我回家 </p>
<p class="content">第二封 留在我身边 远近我都接受 </p>
<p class="content">第三封 我没说过永远 只希望每个明天你都在 </p>
<p class="content">第四封 南风过境十里春风不如你 </p>
<p class="content">第五封 可能时间刚好 你眼角带笑 </p>
<p class="content">第六封 我不喜欢醋这种东西 但我现在天天为你吃 </p>
<p class="content">第七封 向来没耐心的我 在你身边徘徊了这么久</p>
<p class="content">第八封 任凭风吹也无法忘记你的名字 </p>
<p class="content">第九封 你说以后是我和你喝交杯酒还是我去喝你们的喜酒 </p>
<p class="content">第十封 我期待我能在有一天背着背包出现在你的城市 </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景属性</title>
<style type="text/css">
body{
/*background-color: red;*/
background-image:url(../img/狗狗.jpg);
background-size: cover;
}
</style>
</head>
<body>
背景属性
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 对于行内元素无效
*/
img{
min-width: 100px;
max-width: 300px;
min-height: 100px;
max-height: 300px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="../img/狗狗.jpg" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css列表属性</title>
<style type="text/css">
ul{
list-style-image: url(../img/图标.gif);
/*list-style-type: circle;*/
text-align: center;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>5555</li>
<li>6666</li>
<li>7777</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css边框属性</title>
<style type="text/css">
body{
text-align: center;
}
img{
/*border-left-style: dotted;
border-left-color: greenyellow;
border-left-width: 10px;
border-left: dotted greenyellow 10px;
border-top-style: dashed;
border-top-color: mediumseagreen;
border-top-width: 15px;
border-right-style: solid;
border-right-color:green ;
border-right-width: 20px;
border-bottom-style: double;
border-bottom-color: darkgreen;
border-bottom-width: 25px;*/
border: dotted greenyellow 10px;
}
</style>
</head>
<body>
<img src="../img/图标.gif" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css圆角边框</title>
<style type="text/css">
img{
width: 600px;
height: 600px;
/*border: solid blue 20px;*/
/*border-radius: 300px;*/
border-radius: 50%;
}
</style>
</head>
<body>
<img src="../img/图标.gif" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css盒子模型概念</title>
<!--element:元素内容
width:元素内容宽度
height:元素内容高度
border:元素边框
padding:内边距
margin:外边距-->
<style>
img{
width: 200px;
height: 100px;
border: 5px solid green;
}
#img1{
padding: 10px;
margin: 50px;
}
#img2{
padding: 15px;
margin: 100px;
}
#img3{
padding: 20px;
margin: 150px;
}
</style>
</head>
<body>
<img id="img1" src="../img/图标.gif" />
<img id="img2" src="../img/图标2.gif"/>
<img id="img3" src="../img/狗狗.jpg" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css定位属性</title>
<!--position:固定fix，相对relative，绝对absolute，静态static
left:对元素进行左偏移
top:
right:
bottom:-->
<!--固定定位，小广告案例-->
<style type="text/css">
img{
position: fixed;
width: 250px;
height: 200px;
right: 0px;
bottom: 0px;
}
p{
font-size: 100px;
}
</style>
</head>
<body>
<a href="http://pic.sogou.com/pics?query=gif动图&ie=utf-8&bh=1&w=05002600&statref=pc_searchlist_hintword">
<img src="../img/图标.gif" />
</a>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css绝对定位</title>
<style type="text/css">
#s1{
background-color: red;
}
#s2{
background-color: green;
position:absolute;
top:50px;
left: 50px;
}
#s3{
background-color: orange;
}
</style>
</head>
<body>
<span id="s1">
span1
</span>
<span id="s2">
span2
</span>
<span id="s3">
span3
</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css相对定位</title>
<style type="text/css">
#s1{
background-color: red;
}
#s2{
background-color: green;
position: relative;
top: 20px;
left: 20px;
}
#s3{
background-color: orange;
}
</style>
</head>
<body>
<span id="s1">
span1
</span>
<span id="s2">
span2
</span>
<span id="s3">
span3
</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css块级元素行内元素</title>
<style type="text/css">
div{
background-color: green;
margin-top: 50px;
}
span{
background-color: red;
margin-top: 60px;
display: block;
}
</style>
</head>
<body>
<div>
这是一个div
</div>
<span>
这是一个span
</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伸缩布局入门案例一</title>
<style type="text/css">
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
}
#container{
display: flex;
height: 100%;
}
#left{
background-color: indianred;
width: 40%;
height: 100%;
}
#right{
background-color: cornflowerblue;
width: 60%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伸缩布局入门案例二</title>
<style type="text/css">
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
}
#container{
display: flex;
flex-direction: column;
height: 100%;
}
#top{
background-color: orange;
height: 40%;
}
#bottom{
background-color: dodgerblue;
height: 60%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">left</div>
<div id="bottom">right</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css之伸缩注册案例</title>
<style type="text/css">
body{
margin: 0px;
background-image: url(../img/狗狗.jpg);
background-size: cover
}
#left font{
font-size: 40px;
color: gray;
}
#left #f1{
color: orange;
}
#right a{
color: indianred;
text-decoration: none;
}
#right a:hover{
color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<font id="f1">新用户注册</font>
<font id="f2">USER REGISTER</font>
</div>
<div id="center">
</div>
<div id="right">
<font>已有帐户</font>
<a href="/index.html">立即登录</a>
</div>
</div>
</body>
</html>
扫一扫
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
