css-常见的样式和案例
文章目录
-
- 选择器
- 多个和覆盖
- 高度和宽度
- 行内标签和块级标签
- 字体设置
- 浮动
- 内边距
- 外边距
- 区域居中
- 案例-小米商城
- 总结
选择器
类选择器
id选择器
标签选择器
属性选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
color:red;
}
#c2{
color:gold;
}
table{
color:pink;
}
input[type="text"]{
border:1px solid deeppink;
}
.v1[xx="123"]{xuanz
color: red;
}
.yy >a{
color: deeppink;
}
style>
head>
<body>
<div class="c1">
中国
div>
<div id="c2">
广西
div>
<div class="c1">
联通
div>
<table>
<thead>
<tr>
<th>IDth>
<th>IDth>
<th>IDth>
<th>IDth>
tr>
thead>
<tbody>
<tr>
<td>1000td>
<td>1000td>
<td>1000td>
<td>1000td>
tr>
<tr>
<td>1000td>
<td>1000td>
<td>1000td>
<td>1000td>
tr>
tbody>
table>
输入：<input type="text">
输出：<input type="password" >
<div class="v1" xx="123">xdiv>
<div class="v1" xx="456">ydiv>
<div class="v1" xx="789">zdiv>
<div class="yy">
<a>百度a>
<div>
<a>谷歌a>
div>
<ul>
<li>美国li>
<li>美国li>
<li>美国li>
ul>
div>
body>
html>
多个和覆盖
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
color:red;
border: 1px solid red;
}
.c2{
font-size: 28px;
color:green;
}
style>
head>
<body>
<div class="c1 c2">中国联通div>
body>
html>
高度和宽度
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
height: 300px;
width: 50%;
}
style>
head>
<body>
<span class="c1">中国span>
<div>联通div>
body>
html>
行内标签和块级标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
display: inline-block;
height: 100px;
width:300px;
border:1px solid red;
}
style>
head>
<body>
<div class="c1">中国div>
<span class="c1">联通span>
<span class="c1">河北span>
<div style="display: inline">zhong国div>
<span style="display: block">zhong国span>
body>
html>
字体设置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
color: blue;
font-size: 55px;
/*font-weight: 600;*/
font-family: 'Helvetica', sans-serif;
}
.c2{
height:59px;
width: 300px;
border: 1px solid red;
text-align: center;
line-height: 59px;
}
style>
head>
<body>
<div class="c1">中国联通div>
<div class="c2">中国移动div>
body>
html>
浮动
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.item{
float: left;
width: 280px;
height: 170px;
border:1px solid red;
}
style>
head>
<body>
<div style="background-color: #000;">
<div class="item">div>
<div class="item">div>
<div class="item" style="float: right">div>
<div style="clear: both">div>
div>
<div>haihdsdiv>
body>
html>
内边距
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding: 20px 20px 20px 20px;
}
style>
head>
<body>
<div class="outer">
<div style="color: blue">听妈妈的话div>
<div>听妈妈的话div>
div>
body>
html>
外边距
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="height: 200px;background-color: blue">div>
<div style="height: 200px;background-color: red;margin-top:20px;">div>
body>
html>
区域居中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin: 0;
}
.c1{
width: 980px;
background-color: pink;
height: 1000px;
margin: 0 auto;
}
style>
head>
<body>
<div class="c1">div>
body>
html>
案例-小米商城
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin: 0;
}
.header{
/*height:38px;*/
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu{
float: left;
color: white;
}
.header .account{
float: right;
color: white;
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 20px;
}
style>
head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米商城a>
<a>小米商城a>
<a>小米商城a>
<a>小米商城a>
div>
<div class="account">
<a>登录a>
<a>登录a>
<a>登录a>
<a>登录a>
div>
<div style="clear: both">div>
div>
div>
body>
html>
总结
去掉页面默认边距：
body{
margin:0;
}
内容居中：
1.文本居中
<div style="width:200px;text-align:center;">吴佩其div>
2.区域居中
.container{
width:980px;
margin:0 auto;
}
<div class="container">asdjhkahfdiv>
如果存在float，在兄弟节点一定加入
<div style="clear:both">div>