第192课 CSS书写格式
1、行内样式
可以直接将CSS代码写到开始标签当中
I am div.
2、内嵌样式
可以在一对head标签中当中写上一对style标签，然后style标签中编写CSS代码
CSS书写格式
3、外链样式 -- 企业开发中一般都使用外链样式
可以单独新建一个.css的文件，把CSS代码写在这个文件中，
然后通过link标签把这个文件和.html文件关联起来
4、导入样式
可以单独新建一个.css的文件，把CSS代码写到这个文件中，
然后通过@import把这个文件和.html文件关联起来
外链样式和导入样式的区别：
1、外链样式是通过link标签关联
导入样式是通过@import关联，而@import是CSS2.1推出的，所以有兼容问题
2、外链样式在显示界面的时候，会先加载CSS样式，再加载结构，
所以用户看到界面时一定已经设置了样式
导入样式在显示界面的时候，会先加载结构，再加载样式，
所以用户看到界面时不一定已经设置好了样式
/*CSS书写格式.html*/
CSS书写格式
I am div.
/*CSS书写格式.css*/
div{
color: purple;
}
第193课 努比亚-准备工作
1、编写网站第一件事
站点文件夹：包含网站所有的文件
如下：
css文件夹
images文件夹
js文件夹
index.html
注意点
站点文件夹可以是中文
但是站点文件夹下面的子文件和子文件夹不能出现中文
2、重置所有默认的样式和设置一些全局样式，
并且将设置样式的CSS文件和对应的界面关联起来
第194课 努比亚-基本结构
3、网页结构
从上至下，从外到内
顶部，底部 外部，内部
努比亚分为：顶部区域 广告区域 产品区域 底部区域
logo 企业一般做法
，
然后
.top .top_in .top_left h1{
width: 100%;
height: 100%;
}
.top .top_in .top_left h1 a{
display: inline-block;
width: 100%;
height: 100%;
background-image: url("../images/logo.jpeg");
background-size:cover;
}
注意点：
当图片宽度大于父元素的宽度，如何设置居中问题
1、不能使用margin:0 auto;或者text-align:center;让图片居中
2、如果图片的宽度大于父元素的宽度，可以使用定位流让图片居中
弊端：1、需要三行代码 2、必须知道图片的宽度
positon:absolute;
left:50%;
margin-left:-图片的width;
3、技巧：margin:0 -100%; 此时父元素必须设置text-align:center;
css/base.css
/*清空默认样式*/
html{
color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,
img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,
q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a{text-decoration: none;}
}
/*通过对网页样式的总体观察， 设置全局样式*/
body{
font-family: "微软雅黑";
font-size: 12px;
color: #999;
background-color: #F5F5F5;
}
css/index.css
/*顶部区域*/
.top{
height: 60px;
width: 100%;
background-color: black;
position: fixed;
z-index: 999;
}
.top .top_in{
width: 1200px;
height: 100%;
margin: 0 auto;
}
.top .top_in .top_left{
float: left;
height: 100%;
width: 190px;
}
.top .top_in .top_left h1{
width: 100%;
height: 100%;
}
.top .top_in .top_left h1 a{
display: inline-block;
width: 100%;
height: 100%;
background-image: url("../images/logo.jpeg");
background-size:cover;
}
.top .top_in .top_right{
float: right;
height: 100%;
width: 740px;
}
.top .top_in .top_right .top_nav{
float: left;
width: 550px;
height: 100%;
}
.top .top_in .top_right .top_nav>li{
float: left;
}
.top .top_in .top_right .top_nav li a{
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 60px;
margin-left: 40px;
}
.top .top_in .top_right ul li a:hover{
color:#e82c07;
}
.top .top_in .top_right .top_login{
float: right;
width: 150px;
height: 100%;
}
.top .top_in .top_right .top_login>li{
float: right;
line-height: 60px;
margin-left: 10px;
}
.top .top_in .top_right .top_login>li>a{
color: #ccc;
font-size: 12px;
font-weight: normal;
}
.top .top_in .top_right .top_login>li:nth-child(3){
width: 30px;
height: 30px;
background: url("../images/call.jpeg");
margin-top: 15px;
}
/*广告区域*/
.banner {
height: 860px;
width: 100%;
}
.banner .nav_out{
width: 100%;
height: 121px;
position: absolute;
background-color: white;
padding-top: 60px;
/*z-index: 998;*/
}
.banner .nav{
width: 1200px;
height: 121px;
margin: 0 auto;
}
.banner .nav ul{
width: 100%;
height: 100%;
padding-left: 75px;
padding-right: 75px;
box-sizing: border-box;
}
.banner .nav ul li{
float: left;
width: 150px;
height: 100%;
text-align: center;
}
.banner .nav ul li:hover{
border-bottom: 2px solid red;
box-sizing: border-box;
}
.banner .nav ul li img{
width: 120px;
height: 80px;
margin-top: 15px;
}
.banner .nav ul li p{
color: #666;
}
.banner .figure{
width: 100%;
height: 600px;
text-align: center;
overflow: hidden;
background-color: blue;
}
.banner .figure img{
height: 100%;
margin: 0 -100%;
}
.banner .figure ol{
width: 150px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 10px;
}
.banner .figure ol li {
float: left;
width: 8px;
height: 8px;
background-color: #CCC;
margin-left: 15px;
border-radius: 50%;
border: 2px solid transparent;/*透明色*/
transition: all 1s;
}
.banner .figure ol li:hover{
border: 2px solid red;/*透明色*/
background: transparent;
transform: scale(1.2, 1.2);
}
.banner .video{
width: 1200px;
height: 250px;
margin: 0 auto;
margin-top: 10px;
}
.banner .video ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.banner .video ul li{
float: left;
width: 396px;
height: 250px;
text-align: center;
overflow: hidden;
position: relative;
background-color: black;
}
.banner .video ul li img{
height: 100%;
margin: 0 -100%;
}
.banner .video .video_info{
width: 100%;
height: 155px;
position: absolute;
bottom: 0;
opacity: 1;/*作用：设置元素的透明度，特点：子元素也会跟着透明*/
}
.banner .video>ul>li:hover .video_info {
opacity: 1;
}
.banner .video>ul>li:hover>img {
opacity: 0.5;
}
.banner .video>ul>li:hover .video_info>img{
animation: sport 2s .5s ease-in-out infinite;
}
@keyframes sport {
20%{
transform: scale(0.8);
}
40%{
transform: scale(1.2);
}
60%{
transform: scale(0.9);
}
80%{
transform: scale(1);
}
100%{
transform: scale(1);
}
}
.banner .video .video_info img{
width: 60px;
height: 60px;
}
.banner .video .video_info h3{
font-size: 16px;
color: white;
line-height: 40px;
}
.banner .video .video_info p{
color: white;
font-size: 12px;
}
/*产品区域*/
.content{
height: 1883px;
width: 100%;
}
.content dl{
width: 1200px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.content dl dt {
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
}
.content dl dt h3{
font-size: 35px;
color: #333;
}
.content dl dt p{
margin-top: 20px;
color: #e8340e;
}
.content .content_phone{
width: 1200px;
height: 1200px;
}
.content .content_phone li{
float: left;
background-color: white;
position: relative;
overflow: hidden;
}
.content .content_phone li:nth-child(1){
width: 1200px;
height: 395px;
margin-bottom: 10px;
}
.content .content_phone li:nth-child(2){
width: 395px;
height: 795px;
margin-right: 10px;
}
.content .content_phone li:nth-child(3){
width: 795px;
height: 390px;
margin-bottom: 10px;
}
.content .content_phone li:nth-child(4){
width: 390px;
height: 395px;
margin-right: 10px;
}
.content .content_phone li:nth-child(5){
width: 390px;
height: 395px;
}
.content .content_phone li>img{
width: 100%;
transition: all 1s;
}
.content .content_phone li:nth-child(1)>img{
height: 275px;
margin-top: 60px;
margin-left: -100px;
}
.content .content_phone li:nth-child(1):hover img{
margin-left: 0px;
}
.content .content_phone li:nth-child(2)>img{
height: 600px;
}
.content .content_phone li:nth-child(3)>img{
height: 200px;
margin-left: 100px;
}
.content .content_phone li:nth-child(3):hover img{
margin-left: 0px;
}
.content .content_phone>li:hover .img_scale{
transform: scale(1.2);
}
.content .content_phone .phone_des{
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 10px;
text-align: center;
}
.content .content_phone .phone_des>h4{
font-size: 20px;
color: #000;
}
.content .content_phone .phone_des>p{
font-size: 15px;
margin-bottom: 10px;
color: #999;
}
.content .content_phone .phone_des>span{
display: inline-block;
width: 108px;
height: 32px;
text-align: center;
line-height: 32px;
border: 1px solid #ccc;
border-radius: 10px;
}
.content .content_phone li:nth-child(1) .phone_des{
left: 0%;
margin-left: 800px;
bottom: 150px;
}
.content .content_pad{
width: 1200px;
height: 300px;
display: flex;
justify-content: space-between;
}
.content .content_pad li{
float: left;
width: 295px;
height: 300px;
background: white;
overflow: hidden;
}
.content .content_pad li>img{
width: 100%;
transition: all 0.5s;
}
.content .content_pad li>p{
text-align: center;
margin-top: 25px;
}
.content .content_pad li:hover img{
transform: scale(1.2);
}
/*底部区域*/
.footer{
height: 396px;
width: 100%;
background-color: yellow;
}
images 省略
js 暂无
index.html
努比亚首页
-
最新产品
查看全部产品>
-
-
phone型号
描述文字
一探究竟
-
phone型号
描述文字
一探究竟
-
phone型号
描述文字
一探究竟
-
phone型号
描述文字
-
phone型号
描述文字
-
最新配件
查看全部配件>
-
-
配件名称
-
配件名称
-
配件名称
-
配件名称