CSS 层叠样式表 （Cascading Style Sheets）

时间  2019-12-12
标签 css 层叠 样式 cascading style sheets 栏目 CSS 繁體版
原文   原文链接

css样式
内嵌样式：<span style ="color:red;">内嵌</span>
内联：
<style>
span{
font-size:14px;
}
</style>
外联：
<link rel="stylesheet" href="../css/global.css">
在外联中，css里不能写style
font-family：“Microsoft Yahei”，“黑体”，sans-serif；
sans-serif 非衬线字体
serif 衬线字体
选择器
id选择器
id=“span1”css

#sapn1{
border：1px solid；
}
类选择器（能够定义多个样式）
class=“test_class”html

.test_class{
... ;
}
属性选择器
<input type="text">
input[type="text"/]{
... ;
}
组合/并集选择器
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
元素/标签/标记 选择器
<span>xxx</span>
span{
... ;
}
后代选择器
ul li{
background-color：red；
}
子集选择器
ul>li{
border:1px solid;
}
伪类选择器
当前样式
a:link{
... ;
}
点击后： visited
悬停，滑过： hover
点击时： active

shell

 

 

 

标准文档流
前提：在没有CSS的前提上微信

块级元素独占一行，但是width，height字体

行内元素并排显示，auto*auto动画

块级元素列表：url

<address> <caption> <dd> <dt> <html>
<form> <h1>~<h6> <hr> <li> <ol> <ul>
<p> <pre> <table> <td> <tfoot> <th>
<thead> <tr> <body> <figure> <blockquote>
<menu>spa


行内元素：orm

<a> <abbr> <b> <br/> <cite> <em> <i>
<label> <q> <select> <small> <span> <strong>
<sub> <sup> <textarea>htm

 

 

迪士尼主页实战练习

 

index.html部分

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迪士尼</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="homepage">
<header>
<nav>
<ul>
<li>
<i></i>
<a href="#">首页</a>
</li>
<li>
<i></i>
<a href="#">商店</a>
</li>
<li>
<i></i>
<a href="#">乐园</a>
</li>
<li>
<img src="img/b_logo.png" alt="">
</li>
<li>
<i></i>
<a href="#">影视</a>
</li>
<li>
<i></i>
<a href="#">数码</a>

</li>
<li>
<i></i>
<a href="#">会员</a>
</li>
</ul>
</nav>
</header>
<img src="img/160216172223655101.jpg" alt="">
<h1>明星</h1>
<!--明星部分-->
<div class="star">
<ul>
<li>
<img src="img/151209173849244246.jpg" alt="">
<p>米奇和他的朋友们</p>
</li>
<li>
<img src="img/151209173747572402.jpg" alt="">
<p>迪士尼公主</p>
</li>
<li>
<img src="img/151130185638114248.jpg" alt="">
<p>赛车总动员</p>
</li>
<li>
<img src="img/151130185656630780.jpg" alt="">
<p>小公主苏菲亚</p>
</li>
<li>
<img src="img/151130185733287815.jpg" alt="">
<p>冰雪奇缘</p>
</li>
<li>
<img src="img/151130185754146838.jpg" alt="">
<p>星球大战</p>
</li>
</ul>
</div>
<h1>商店</h1>
<!--商店部分-->
<div class="store">
<!--商店左边-->
<div class="store_left">
<img src="img/160322141822716049.jpg" alt="">
</div>
<!--商店右边-->
<div class="store_right">
<img src="img/phoneshell.jpg" alt="">
<img src="img/fox.jpg" alt="">
<img src="img/pendent.jpg" alt="">
<img src="img/cup.jpg" alt="">
</div>
</div>
<h1>迪士尼资讯</h1>
<!--资讯部分-->
<div class="news">
<div class="news_left">
<section><img src="img/160113121641905797.jpg" alt=""></section>
<section class="news_text">
<h2>上海迪士尼乐园开园在即！</h2>
<p>自2016年6月16日起，您将能够探索一个史无前例的神奇世界，
每一个人都能在这里点亮心中奇梦。
<i></i>
</p>
</section>
</div>
<div class="news_right">
<div class="news_right_up">
<ul>
<li>
<section><img src="img/160321105131828720.jpg" alt=""></section>
<section class="news_text">
<h3>《疯狂动物城》票房突破10亿人民币！</h3>
<p>《疯狂动物城》上映第16日登顶中国动画卖座第一，
并成为史上首部破10亿动画片！
<i></i>
</p>
</section>
</li>
<li>
<section><img src="img/160225171114064621.jpg" alt=""></section>
<section class="news_text">
<h3>全球首座迪士尼音乐报时钟楼正式落成</h3>
<p>迪士尼钟楼将于迪士尼旗舰店
一块儿为上海带来一份奇妙而梦幻的娱乐购物体验。
<i></i>
</p>
</section>
</li>
</ul>
</div>
<div class="news_right_down">
<div class="news_right_down_img"><section><img src="img/160229155948703765.jpg" alt=""></section></div>
<div class="news_right_down_text">
<section class="news_text">
<h3>《头脑特工队》得到第88届奥斯卡最佳动画长片</h3>
<p>皮克斯《头脑特工队》得到第88届奥斯卡最佳动画长片！实至名归！
<i></i>
</p>
</section>
</div>
</div>
</div>
</div>
<!--脚部-->
<footer>
<div class="foot">
<!--二维码-->
<div>
<ul>
<li><img src="img/b_logo.png" alt=""></li>
<li><img src="img/weibo.jpg" alt=""><p>关注咱们的微博</p></li>
<li><img src="img/weibo.jpg" alt=""><p>关注咱们的微信</p></li>
</ul>
</div>
<!--关于咱们-->
<div>
<a href="#">关于咱们</a>
<a href="#">加入咱们</a>
<a href="#">法律条款</a>
<a href="#">隐私政策</a>
<a href="#">退换货政策</a>
</div>
<div><small>Disney | Pixar All rights reserved.备案号：沪B2-20040339-3</small></div>
</div>
</footer>

</div>
</body>
</html>

 

CSS部分

*{
padding: 0;
margin: 0;
}
.homepage{
width: 1200px;
margin: auto;
/*outline:1px solid;*/
}
body{
font-family: sans-serif;
}
li{
list-style-type: none;
}
h1{
font-family: Arial sans-serif;
text-align: center;
margin: 55px 0 42px 0;
}
/*导航栏*/
header li{
float: left;
width: 14.28%;
text-align: center;
line-height: 46px;
}
header a{
text-decoration: none;
color: black;
}
header i{
display: inline-block;
width: 20px;
height: 20px;
background: url("img/icon.png");
}
header li:nth-child(2) i{
background-position: 0 -20px;
}
header li:nth-child(3) i{
background-position: 0 -44px;
}
header li:nth-child(5) i{
background-position: 0 -62px;
}
header li:nth-child(6) i{
background-position: 0 -80px;
}
header li:nth-child(7) i{
background-position: 0 -101px;
}

/*导航悬停视口变化*/
header li:hover a{
color: red;
}
header li:nth-child(1):hover i{
background-position: -22px 0;
}
header li:nth-child(2):hover i{
background-position: -22px -20px;
}
header li:nth-child(3):hover i{
background-position: -22px -44px;
}
header li:nth-child(5):hover i{
background-position: -22px -62px;
}
header li:nth-child(6):hover i{
background-position: -22px -80px;
}
header li:nth-child(7):hover i{
background-position: -22px -101px;
}

 

/*明星*/
.star{
overflow: hidden;
text-align: center;
}
.star li{
width: 16.6%;
float: left;
}
.star img{
width: 115px;
}
/*商店*/
.store{
overflow: hidden;
}
.store img{
float: left;
}
.store_left img{
width: 50%;
}
.store_right img{
width: 24.8%;
border: 1px solid gainsboro;
}

/*资讯*/

.news{
overflow: hidden;
height: 769px;
outline: 1px solid gainsboro;
}
.news p{
font-size: 15px;
color: rgb(84, 85, 77);

}
.news_text{
margin: 30px 30px 10px;
}
.news h3,h2{
padding-bottom: 22px;
}
.news_left{
width: 50%;
float: left;
}
.news_right_up ul{
height:62%;
}
.news_right_up li{
width: 25%;
float: left;
outline: 1px solid gainsboro;
}
.news_right_down{
width: 50%;
float: right;
}

.news_right_down_text{
display: inline-block;
width: 50%;
float: right;
}
.news_right_down_img{
width: 50%;
float: left;
}

.news i{
display: inline-block;
width: 14px;
height: 14px;
background: url("img/icon.png");
background-position: -48px -102px;
}
/*.news li{*/
/*outline: 1px solid gainsboro;*/
/*}*/

/*脚部*/footer{ text-align: center;}.foot{ margin-bottom: 150px;}footer ul{ overflow: hidden; width: 490px; margin: 90px auto 21px; padding: 25px; border-bottom: 1px solid gainsboro;}footer li{ float: left;}footer li:nth-child(1){ padding: 0 30px 0 0; border-right: 1px solid gainsboro;}footer li:nth-child(2){ padding: 0 35px;}footer a{ text-decoration: none; color: black;}

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程