CSS HTML自学
2015-11-06 09:13
671 查看
CSS选择器不光是HTML元素 还有类选择器
class 即<div class="XXX"></div>
样式表 修饰 html元素，就是把一个html 看做是一个大模块 选择器中
{}能修饰html 的有三个元素：1，font-size,2,color 3font-famly
模块最近边框最近的是border 三个元素 width style color
边框和内容之间的属性是padding
auto，当 其一边，top bottom left right 设置成auto 则他们会抢占成尽可能多的空间
image-backgroud:
CSS用于改变html 元素位置的以及显示， 使用display, position:relative,float
display 显示其格式
relative 显示其相对位置
float显示向哪边移动
一个网页首先要有的是导航
导航需要用<ul><li></li><li></li></ul>
然后是大屏幕内容
bootstrap： grid 是一个网页上的12个列 想要排版 需要用到 <div class="col-md-6"></div>来排版
tabs 导航的按钮
Pills are a set of buttons that give links to different parts of a site. Pills are seen in sites like Google's search results page.
Bootstrap makes it easy to create pill navigation. Let's see how to do this.
<ul class=" nav nav-tabs">
<li><a href="#">Primary</a></li>
<li class="active"><a href="#">Social</a></li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Updates</a></li>
</ul>
Many sites have a large showcase area featuring important content. Showcases are seen on sites likeGoogle
Mobile and Apple.
Bootstrap calls this large showcase a jumbotron.
A jumbotron is used to call extra attention to important content on the site. Let's see how to use it.
<div class="jumbotron">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav nav-tabs">
<div class="container">
<ul class="pull-left">
<li class="active"><a href="#">美容</a></li>
<li><a href="#">微整形</a></li>
</ul>
<ul class="pull-right">
<li><a href="#">好评</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
<a href="#">Learn More</a>
</div>
</div>
<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>Not sure where to stay? We've created neighborhood
guides for cities all around the world
</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<image src="http://goo.gl/0sX3jq">
</div>
<div class="thumbnail">
<image src="http://goo.gl/an2HXY">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<image src="http://goo.gl/Av1pac" >
</div>
<div class="thumbnail">
<image src="http://goo.gl/vw43v1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" >
<image src="http://goo.gl/0Kd7UO" >
</div>
</div>
</row>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p><a href="#">See how to travel on Airbnb</a></p>
</div>
<div class="col-md-4">
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p><a href="#">Learn more about hosting</a></p>
</div>
<div class="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p><a href="#">Learn about trust at Airbnb</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
main.css
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhood-guides {
background-color:#efefef;
border-bottom:1px solid #dbdbdb;
}
.neighborhood-guides h2 {
color:#393c3d;
font-size:24px;
}
.neighborhood-guides p{
font-size:15px;
margin-bottom:13px;
}
class 即<div class="XXX"></div>
样式表 修饰 html元素，就是把一个html 看做是一个大模块 选择器中
{}能修饰html 的有三个元素：1，font-size,2,color 3font-famly
模块最近边框最近的是border 三个元素 width style color
边框和内容之间的属性是padding
margin是最外层那个
auto，当 其一边，top bottom left right 设置成auto 则他们会抢占成尽可能多的空间image-backgroud:
CSS用于改变html 元素位置的以及显示， 使用display, position:relative,float
display 显示其格式
relative 显示其相对位置
float显示向哪边移动
一个网页首先要有的是导航
导航需要用<ul><li></li><li></li></ul>
然后是大屏幕内容
bootstrap： grid 是一个网页上的12个列 想要排版 需要用到 <div class="col-md-6"></div>来排版
tabs 导航的按钮
Pills
Pills are a set of buttons that give links to different parts of a site. Pills are seen in sites like Google's search results page.Bootstrap makes it easy to create pill navigation. Let's see how to do this.
<ul class=" nav nav-tabs">
<li><a href="#">Primary</a></li>
<li class="active"><a href="#">Social</a></li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Updates</a></li>
</ul>
Jumbotron
Many sites have a large showcase area featuring important content. Showcases are seen on sites likeGoogleMobile and Apple.
Bootstrap calls this large showcase a jumbotron.
A jumbotron is used to call extra attention to important content on the site. Let's see how to use it.
<div class="jumbotron">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav nav-tabs">
<div class="container">
<ul class="pull-left">
<li class="active"><a href="#">美容</a></li>
<li><a href="#">微整形</a></li>
</ul>
<ul class="pull-right">
<li><a href="#">好评</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
<a href="#">Learn More</a>
</div>
</div>
<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>Not sure where to stay? We've created neighborhood
guides for cities all around the world
</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<image src="http://goo.gl/0sX3jq">
</div>
<div class="thumbnail">
<image src="http://goo.gl/an2HXY">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<image src="http://goo.gl/Av1pac" >
</div>
<div class="thumbnail">
<image src="http://goo.gl/vw43v1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" >
<image src="http://goo.gl/0Kd7UO" >
</div>
</div>
</row>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p><a href="#">See how to travel on Airbnb</a></p>
</div>
<div class="col-md-4">
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p><a href="#">Learn more about hosting</a></p>
</div>
<div class="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p><a href="#">Learn about trust at Airbnb</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
main.css
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhood-guides {
background-color:#efefef;
border-bottom:1px solid #dbdbdb;
}
.neighborhood-guides h2 {
color:#393c3d;
font-size:24px;
}
.neighborhood-guides p{
font-size:15px;
margin-bottom:13px;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML之css+div
- html+jquer+css知识积累
- css 浅析display属性
- CSS基础学习六：id选择器
- 网页制作之内嵌样式实例
- 8.1.1 CSS3选择器 —— 属性选择器
- css样式大全
- CSS：margin重叠-父子关系
- 漫谈CSS transform动画技术
- css的background 属性
- class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass
- css3的3D翻牌效果
- animate.css
- css央样式属性
- 让IE6/IE7/IE8浏览器支持CSS3属性
- IE中的CSS3不完全兼容方案
- 实例浅析CSS Sprite
- css写圆角效果
- Evernote样式的Share Extension
- 用css3动画为焦点图加延迟动画