发表于： 2019-06-05 23:55:16
3 729
今天完成的事
1.设置两个div
<div class="div"></div>
<div1 class="div"></div1>
2.为div引入样式
.div{
position: absolute; /*设置绝对定位*/
top: 68px; /*距离上边68px*/
left: 50px; /*距离右边50px*/
background: rgb(225, 229, 231); /*设置采取来的颜色*/
width: 1px; /*宽度设置为1px*/
height: 30px; /*高度设置为30px*/
3.精简代码
4.开始任务5
5.设置header
<header class="background">
</header>
6.为header引入样式
.background{
background-color: rgb(95, 192, 205);/*设置header颜色*/
position: absolute; /*设置绝对定位*/
width: 100%; /*设置宽度100%自适应*/
height: 50px; /*设置高度为50px*/
}
7.设置footer
<footer class="background">
</footer>
8.为footer引入样式
footer.background{
background-color: white; /*设置颜色为白色*/
bottom: 0px; /*设置距离下边距离为0px*/
}
9.设置<
<h1 class="h_1">
<
</h1>
10.为<引入样式
.h_1{
margin-top: 12px; /*设置上外边距为15px*/
position: absolute; /*设置绝对定位*/
color: rgb(255, 255, 255); /*设置字体颜色*/
font-size: 18px; /*设定字体大小为15spx*/
left: 10px;
}
10.设置“个人主页”
<h2 class="h_1">
个人主页
</h2>
11.为“个人主页”引入样式
h2.h_1{
left: 50%; /*设置距离右边50%*/
margin-left: -28px; /*距离右边50%减去自身一半宽度 实现绝对居中*/
font-size: 14px; /*设定字体大小为14px*/
margin-top: 14px; /*设置上外边距为14px*/
12.设置“留言”“电话联系”按钮
<f1>
<input type="button"
class=""
value="留言">
</f1>
<f2>
<input type="button"
class=""
value="电话联系">
</f2>
13.为“留言”“电话联系按钮”引入样式
.f1{
position: absolute; /*设置绝对定位*/
width: 50%; /*设置按钮占据屏幕宽度各50%*/
height: 100%; /*设置高度占据footer的100%*/
}
.f2{
right: 0px; /*设置按钮距离右边0%靠右*/
}
明天计划的事
1.使用PS切图导出素材
2.调试“留言”和“电话联系”按钮的样式 实现和效果图的样式
3.添加图片
4.添加中间部分内容
5.布局中间内容
6.学习《CSS代码规范》
遇到的问题
使用DIV块达成分隔符效果时不知道如何在input里如何达到上下完美对称 只能目视来调试 但是显然不是最佳效果
收获
1）设置背景图片自适应大小不留白
HTML：
<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title></head><body><div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代码 ... --></div></body></html>CSS：
#web_bg{ position:fixed; top: 0; left: 0; width:100%; height:100%; min-width: 1000px; z-index:-10; zoom: 1; background-color: #fff; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0;
}下面，我们来分析一下，css中每句代码的作用是什么：
position:fixed; top: 0; left: 0;这三句是让整个div固定在屏幕的最上方和最左方
width:100%; height:100%; min-width: 1000px;上面前两句是让整个div跟屏幕实现一模一样的大小，从而达到全屏效果，而min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变，也就是说在这种情况下，缩放屏幕宽度时，图片不要缩放（只有在1000px以内才有效）。
z-index:-10;这个的目的是让整个div在HTML页面中各个层级的下方，正常情况下，第一个创建的层级z-index的值是0，所以如果我们这里写成-1也可以实现，不过这里写-10是确保整个div在最下面，因为如果页面中层级太多了，有的时候用-1不一定在最下面，但如果写成-100这样大数字的也没有什么意义。用index:-10 以此能达到看上去像背景图片，其实是一个最普通的div，只是层级关系变了，才让人看上去看是背景图片。
background-repeat: no-repeat;上面这个是背景不要重复
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;上面三句是一个意思，就是让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。
background-position: center 0;上面这句的意思就是图片的位置，居中，靠左对齐。
转载：https://www.jianshu.com/p/5480cd1a5d89
2）对前几个任务的几个知识点进行了复习 再次运用起来感觉很顺手 速度比之前快很多
返回列表
评论