在千锋“逆战”学习第48天
每日一句：程序员可以让步，却不可以退缩，可以羞涩，却不可以软弱，总之，程序员必须是勇敢的。
今天学习了css中边框、盒子、布局、定位的内容。
明天继续努力。
课堂案例
<head>
<meta charset="UTF-8">
<title>文本属性及字体属性综合练习</title>
<!--
标题：字号3em，颜色红色，居中，楷体。
内容：字号1.2em，颜色黑色，居左，宋体，首行缩进2em，行高2em,字符间距0.1em。
-->
<style>
body{
background-image: url(img/girl01.jpg);
background-size: cover;
}
#title{
font-size: 3em;
color: red;
text-align: center;
font-family: "楷体";
}
.content{
font-size: 1.2em;
color: red;
text-align: left;
font-family: "宋体";
text-indent: 2em;
line-height: 2em;
letter-spacing: 0.1em;
font-weight: bolder;
}
</style>
</head>
<body>
<p id="title">
再见青春再见我的爱
</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>
<head>
<meta charset="UTF-8">
<title>css背景属性</title>
<!--
background-color:将颜色作为背景
background-image:将图片作为背景
-->
<style>
body{
background-color: green;
color: red;
font-size: 300px;
background-image: url(img/girl01.jpg);
background-size: cover;
}
</style>
</head>
<body >
青青草原
</body>
<head>
<meta charset="UTF-8">
<title>css尺寸属性</title>
<!--
css尺寸属性对行内元素无效!
-->
<style>
#d1{
min-width: 100px;
max-width: 300px;
min-height: 100px;
max-height: 300px;
width: 500px;
height: 500px;
background-color: green;
display: inline-block;
}
</style>
</head>
<body>
<font id="d1">这是一个font</font>
<!--图片属于特殊的行内元素-->
<!--<img src="img/girl01.jpg" id="d1"/>-->
<!--行内元素-->
<!--<span id="d1">这是一个span</span>-->
<!--<div id="d1">这是一个div</div>-->
</body>
<head>
<meta charset="UTF-8">
<title>css列表属性</title>
<!--
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的样式
-->
<style>
ul{
/*文本内容的对齐方式*/
text-align: center;
list-style-image: url(img/a.gif);
/*list-style-type: circle;*/
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>逗小龙</li>
<li>邱威</li>
<li>马海超</li>
</ul>
</body>
<head>
<meta charset="UTF-8">
<title>css边框属性</title>
<style>
body{
text-align: center;
}
#d1{
width: 300px;
height: 300px;
border: dotted greenyellow 10px;
/*
* 左边框
* 样式：点状
* 颜色：淡绿
* 宽度：10px
*/
/*
border-left-style: dotted;
border-left-color: greenyellow;
border-left-width: 10px;
*/
/*border-left: dotted greenyellow 10px;*/
/*
* 上边框
* 样式：虚线
* 颜色：中绿
* 宽度：15px
*/
/*
border-top-style: dashed;
border-top-color: mediumseagreen;
border-top-width: 15px;
*/
/*border-top: dotted greenyellow 10px;*/
/*
* 右边框
* 样式：实线
* 颜色：绿
* 宽度：20px
*/
/*
border-right-style: solid;
border-right-color: green;
border-right-width: 20px;
*/
/*border-right:dotted greenyellow 10px;*/
/*
* 下边框
* 样式：实线
* 颜色：绿
* 宽度：20px
*/
/*
border-bottom-style: double;
border-bottom-color: darkgreen;
border-bottom-width: 25px;
*/
/*border-bottom: dotted greenyellow 10px;*/
}
</style>
</head>
<body>
<img id="d1" src="img/girl04.jpg" />
</body>
<head>
<meta charset="UTF-8">
<title>css圆角边框</title>
<style>
img{
width: 1000px;
height: 1000px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="img/girl04.jpg" />
</body>
<head>
<meta charset="UTF-8">
<title>css盒子模型基本使用</title>
<!--
内边距：边框到元素内容的距离
padding:同时设置左上右下内边距
padding-left/padding-top/padding-right/padding-bottom
外边距：边框到其他元素的距离
margin:同时设置左上右下外边距
margin-left/margin-top/margin-right/margin-bottom
浏览器：元素进行渲染的时候，是从左往右进行渲染，
相当于现实生活中，排队买东西，margin-right告诉最后一个人，离下一个人要有200米远
-->
<style>
body{
float: right;
}
img{
width: 200px;
height: 100px;
border: 5px solid blue;
}
#img1{
/*padding: 10px;
margin: 50px;*/
}
#img2{
/*padding: 15px;
margin: 100px;*/
}
#img3{
/*padding-top: 20px;*/
/*margin-left: 150px;*/
margin-right: 200px;
}
</style>
</head>
<body>
<img id="img1" src="img/girl01.jpg" />
<img id="img2" src="img/girl02.jpg" />
<img id="img3" src="img/girl03.jpg" />
</body>
<head>
<meta charset="UTF-8">
<title>css固定定位</title>
<!--
position:fixed
需求：完成美女小广告
-->
<style>
img{
position: fixed;
width: 350px;
height: 200px;
right: 0px;
bottom: 0px;
}
p{
font-size: 200px;
}
</style>
</head>
<body>
<a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%CD%C4%D0&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111"><img src="img/boy01.jpg" /></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>
</body>
<head>
<meta charset="UTF-8">
<title>css相对定位</title>
<!--
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
相对于原来的位置进行偏移！！！
-->
<style>
#s1{
background-color: red;
}
#s2{
background-color: orange;
position: relative;
top: 20px;
left: 20px;
}
#s3{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<span id="s1">
这是span1
</span>
<span id="s2">
这是span2
</span>
<span id="s3">
这是span3
</span>
</body>
<head>
<meta charset="UTF-8">
<title>css绝对定位</title>
<!--
并相对于其包含块定位，
元素原先在正常文档流中所占的空间会关闭
-->
<style>
body{
/*margin: 0px;*/
}
#s1{
background-color: red;
}
#s2{
background-color: orange;
position: absolute;
top: 50px;
left: 50px;
}
#s3{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<span id="s1">
这是一个span1
</span>
<span id="s2">
这是一个span2
</span>
<span id="s3">
这是一个span3
</span>
</body>
<head>
<meta charset="UTF-8">
<title>css块级元素和行内元素</title>
<!--
1,行内元素:元素仅仅包裹内容,常见：span ， padding-top/padding-bottom , margin-top/margin-bottom 存在问题
2,块级元素:占满整一行,常见:div
-->
<style>
div{
background-color: deepskyblue;
display: inline;
padding-top: 10px;
margin-top: 100px;
}
span{
background-color: orange;
margin-top: 100px;
display: block;
}
</style>
</head>
<body>
<div>
这是一个div
</div>
<span>
这是一个span
</span>
</body>
<head>
<meta charset="UTF-8">
<title>css伸缩布局入门案例一</title>
<!--
完成以下图示布局，左边是菜单栏（40%），右边是内容栏（60%），高度填充整个屏幕。
浏览器 -> html -> body > container -> left/right
-->
<style>
html{
height: 100%;
}
body{
/*按照父容器的高度的100%进行设定*/
height: 100%;
margin: 0px;
}
/*让id为container的容器为伸缩布局*/
#container{
display: flex;
/*按照父容器的高度的100%进行设定*/
height: 100%;
}
#left{
background-color: indianred;
width: 40%;
/*按照父容器的高度的100%进行设定*/
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>
<head>
<meta charset="UTF-8">
<title>css伸缩布局入门案例二</title>
<!--
完成以下图示布局，上边是菜单栏（40%），下边是内容栏（60%），宽度填充整个屏幕。
-->
<style>
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">top</div>
<div id="bottom">bottom</div>
</div>
</body>
注册界面
<head>
<meta charset="UTF-8">
<title>注册案例</title>
<style>
body{
background-image: url(../img/girl01.jpg);
background-size: cover;
position: relative;
}
#contain {
background-color: white;
width: 900px;
height: 300px;
display: flex;
position: absolute;
}
#left{
width: 300px;
}
#left font{
font-size: 20px;
color: lightslategray;
}
#left #f1{
color: orange;
}
#center font{
color: lightgray;
}
#right{
width: 300px;
text-align: right;
}
#right a{
color: indianred;
text-decoration: none;
}
#right a:hover{
color: darkred;
}
</style>
</head>
<body>
<div id="contain">
<div id="left">
<font id="f1">新用户注册</font>
<br />
<font id="f2">USER REGISTER</font>
</div>
<div id="center" >
<font>账户</font><input type="text" name="username" placeholder="请输入账户"/><br />
<font>密码</font><input type="password" name="password" placeholder="请输入密码" /><br />
<font>E mail</font><input type="text" name="email" placeholder="请输入邮箱"/><br />
<font>姓名</font><input type="text" name="name" placeholder="请输入姓名"/><br />
<font>手机号</font><input type="number" name="number" placeholder="请输入手机号" /><br />
<font>性别</font><input type="text" name="sex" placeholder="请输入性别" /><br />
<font>出生日期</font><input type="date" name="borndate" placeholder="yyyy年MM月dd日"/><br />
<font>验证码</font>
</div>
<div id="right">
<font>已有账户？</font>
<a href="../../day47/demo01.html">立即登录</a>
</div>
</div>
</body>
