我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总css说起，包含知识点css背景大小，css多背景图，css设置设计带花纹的网页边框，css设计圆边页面，css设计分栏版式，css设计滑动门菜单，css设计焦点图
1.css设置背景大小
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
margin:2px;
float:left;
border:solid 1px red;
background:url(//freemuban.com/img/202004171638bg.jpg) no-repeat center;
/*设计背景图像完全覆盖元素区域*/
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
}
/*设计元素大小*/
.h1 { height:120px; width:192px; }
.h2 { height:240px; width:384px; }
</style>
</head>
<body>
<div class="h1"></div>
<div class="h2"></div>
</body>
</html>
2.css多背景图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
#call {
width: 218px;
height: 200px;
padding: 1px;
background-image: url(//freemuban.com/img/call_top.gif), url(//freemuban.com/img/call_btm.gif), url(//freemuban.com/img/call_mid.gif);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: top center, bottom center, top center;
}
h1 {
margin-top: 16px;
margin-left: 16px;
font-size: 14px;
}
p {
font-size: 12px;
padding: 12px;
}
</style>
</head>
<body>
<div id="call">
<h1>公司公告</h1>
<p>公告内容</p>
</div>
</body>
</html>
3.css设计带花纹的网页边框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带花纹边框</title>
<style>
* {
padding : 0;
margin : 0;
}
body {
font-family : 宋体, Arial, Helvetica, sans-serif;
color : #024977;
font-size : 14px;
background: #dfbfc0;
text-align: center;
}
p {
padding: 0 20px;
line-height: 1.8em;
text-indent: 2em;
text-align: left;
}
#container {
width: 810px;
margin: 0 auto;
background: url(//freemuban.com/img/202004171639bg1.jpg) repeat-y;
}
#header {
width: 790px;
height: 120px;
margin: 0 auto;
background: #fff;
border-top: #FFFFFF 2px solid;
}
#header .logo {
float: left;
margin-top: 20px;
margin-left: 20px;
}
#header #title {
float: right;
font-size: 34px;
font-weight: bold;
letter-spacing: 5px;
font-family: 黑体;
margin-top: 20px;
margin-right: 60px;
}
#header #title span {
display: block;
margin: 10px 0 0 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: 5px;
}
#menu_container {
clear: both;
width: 790px;
margin: 0 auto;
height: 36px;
background: #f7f392;
}
#menu {
width: 790px;
height: 36px;
margin: 0 auto;
}
#menu ul {
width: 790px;
height: 36px;
float: left;
margin: 0px;
padding: 0;
list-style: none;
border-bottom: #FFFFFF 2px solid;
border-top: #FFFFFF 2px solid;
background: #f7f392;
}
#menu ul li {
margin: 0px;
padding-bottom: 0px;
display: inline;
}
#menu ul li a {
position: relative;
float: left;
display: inline;
height: 28px;
width: 100px;
margin-right: 10px;
text-align: center;
padding: 8px 0 0 10px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #f54f06;
}
#content_container {
clear: both;
width: 790px;
margin: 0 auto;
padding-bottom: 20px;
padding-top: 20px;
background: #FFFFFF;
}
#content {
width: 790px;
margin: 0 auto;
padding: 0px;
}
h2 { padding: 40px auto; }
#footer_container {
clear: both;
width: 790px;
margin: 0 auto;
}
#footer {
margin: 0 auto;
color: #033a5d;
height: 50px;
font-size: 14px;
background: #999999;
border-bottom: 2px #FFFFFF solid;
border-top: 2px #FFFFFF solid;
padding-top: 20px;
}
#footer a,
footer a:hover {
color: #033a5d;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo"><img src="//freemuban.com/img/202004171639logo.jpg"></div>
<div id="title">高质.高效 <span>是我们一直的追求</span> </div>
</div>
<div id="menu_container">
<div id="menu">
<ul>
<li><a href="#" class="current"><span></span>首页</a></li>
<li><a href="#" target="_parent"><span></span>一起约吧</a></li>
<li><a href="#" target="_blank"><span></span>快速服务</a></li>
<li><a href="#"><span></span>合作伙伴</a></li>
<li><a href="#"><span></span>联系我们</a></li>
</ul>
</div>
</div>
<div id="content_container">
<div id="content">
<h2>世纪佳缘简介</h2>
<p>世纪佳缘是国内领先的在线婚恋交友网站，2003年10月8日创立于中国上海。自创立以来，世纪佳缘致力为用户提供全方位的在线生活服务。2011年5月11日，世纪佳缘登陆美国纳斯达克股票市场，成为国内首家上市的在线婚恋交友平台，自上市以来世纪佳缘净收入已连续18个季度保持同比两位数或以上的增长。</p>
<p>2015年，世纪佳缘移动端用户登录次数占比达到72%。2014年这一数字约为68%。截至2015年底，世纪佳缘用户注册总数超1.6亿，年平均月活跃用户数约为530万。世纪佳缘自2013年起大力推进公司主营业务从PC端向移动端转移，并在移动端进行多品牌的战略布局，相继推出求爱网、求约会等移动端产品，2014年更是加速布局移动端，5月推出爱真心App后，世纪佳缘新版App也在当年12月正式上线。</p>
<p>覆盖PC和移动端的同时，世纪佳缘一对一红娘业务也保持着稳步提升。截至2016年5月，一对一红娘业务已经覆盖全国73个主要城市103家线下实体店，除一对一红娘业务外，世纪佳缘还于2015年7月推出红娘经纪人业务，截至2016年5月，红娘经纪人已覆盖全国9大城市21个线下实体店，红娘经纪人总数已超过14000人。 红娘经纪人业务是全球分享经济大潮中的创新一员，作为中国互联网婚恋交友行业的先驱和优秀代表，世纪佳缘CEO吴琳光受邀参加2015年乌镇世界互联网大会时表示：“国家近两年提倡的‘互联网+’是全球互联网共同的趋势，特别是分享经济更是未来的发展潮流，世纪佳缘会继续坚持创新，拥抱创新，不断开拓新业务，服务好用户。”</p>
</div>
</div>
<div id="footer_container">
<div id="footer">Copyright@ 2017 | Designed by us <a href="#" target="_parent">联系我们</a> </div>
</div>
</div>
</body>
</html>
4.css设计圆边页面
<!doctype html>
<html>
<meta charset="utf-8">
<title></title>
</head><style>
body {
text-align: center;
background-color: #CCCCCC;
font-family: 黑体;
}
.container {
width: 800px;
margin: 0 auto;
}
.header {
width: 100%;
height: 200px;
background-image: url(//freemuban.com/img/202004171641bg.gif);
}
.menu {
width: 796px;
height: 35px;
padding-top: 5px;
text-align: center;
border-left: green 2px solid;
border-right: green 2px solid;
background-color: #f0d835;
}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%px;
height: 35px;
padding: 4px;
background-color: #f0d835;
}
li {
float: left;
background-color: #f0d835;
height: 31px;
padding: 0px 20px;
}
.content {
width: 796px;
background-color: #FFFFFF;
padding: 0px;
height: 200px;
border: green 2px solid;
}
.footer {
width: 800px;
height: 80px;
background: url(//freemuban.com/img/202004171641footer_bg.gif);
padding-top: 20px;
}
</style>
<body>
<div class="container">
<div class="header"></div>
<div class="menu">
<ul>
<li>首页</li>
<li>热门推荐</li>
<li>精华帖</li>
<li>交流区</li>
<li>经典收藏</li>
<li>历史记录</li>
<li>通讯录</li>
<li>关于我们</li>
</ul>
</div>
<div class="content"></div>
<div class="footer">@2017 版权所有|关于我们|联系我们|</div>
</div>
</body>
</html>
5.css设计分栏版式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分栏版式</title>
<style>
body {
background-image: url(//freemuban.com/img/202004171642bg.jpg);
background-repeat: repeat-x;
text-align: center;
}
.container {
text-align: center;
background-color: #d3eeeb;
width: 800px;
height: 720px;
margin: 0 auto;
}
.header { width: 800px; }
.content {
background-color: #fff;
width: 800px;
}
table {
text-align: center;
width: 790px;
margin: 5px;
}
.l1 {
width: 270px;
height: 210px;
background-image: url(//freemuban.com/img/202004171642left1.jpg);
}
.l2 {
width: 270px;
height: 270px;
background-image: url(//freemuban.com/img/202004171642left2.jpg);
}
.r1 {
width: 520px;
height: 210px;
background-image: url(//freemuban.com/img/202004171642right1.gif);
}
.r2 {
width: 520px;
height: 270px;
background-image: url(//freemuban.com/img/202004171642right2.gif);
}
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="//freemuban.com/img/202004171642banner.jpg"></div>
<div class="content">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="l1"></td>
<td class="r1"></td>
</tr>
<tr>
<td class="l2"></td>
<td class="r2"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
6.css设计滑动门菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门菜单</title>
<style type="text/css">
body {
font-size: 13px;
line-height: 38px;
}
.content {
width: 600px;
height: 220px;
background: #FBEBFC;
font-size: 14px;
line-height: 2em;
color: #2E4583;
padding:6px 24px 12px;
float: left;
}
.menu ul {
padding: 0;
list-style-type: none;
background: #fff;
}
.menu li {
float: left;
margin: 0;
padding: 0;
background: url(//freemuban.com/img/2020041716444.gif) no-repeat right top;
}
.menu li a {
display: block;
background: url(//freemuban.com/img/2020041716443.gif) no-repeat left top;
padding: 0 15px;
font-size: 15px;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.menu li a:hover { color: #c00; }
.menu li.first { background: url(//freemuban.com/img/2020041716442.gif) no-repeat right top; }
.menu li.first a {
background: url(//freemuban.com/img/2020041716441.gif) no-repeat left top;
color: #000;
}
.menu li.first a:hover { color: #f00; }
.menu li:hover { background: url(//freemuban.com/img/2020041716442.gif) no-repeat right top; }
.menu li:hover a {
background: url(//freemuban.com/img/2020041716441.gif) no-repeat left top;
color: #f00;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li class="first"><a href="#">首 页</a></li>
<li><a href="#">CSS教程</a></li>
<li ><a href="#">CSS实例</a></li>
<li><a href="#">CSS层与布局</a></li>
<li><a href="#">CSS特效</a></li>
</ul>
</div>
<div class="content">
<p> 什么是滑动门技术？究其本意，就是根据文本自适应大小，进行滑动。我们可以用背景图片来营造这样的现象，一个在左一个在右，把这两个图片想象成可以滑动的门，当文本较少的时候，两个图片重叠的就多些，当文本较多的时候就滑动开，重叠的所谓“滑动门”，就是两个嵌套的元素，各自使用一个背景图像，二者中间部分重叠，两端不重叠，这样，左右两端的花纹就可以都被显示出来，中间部分的宽度可以自动适应，因此宽度变化时，依然可以保证左右两端的图案不变。“滑动门”这个名称很形象地描述了这种方法的本质，两个图像就像两扇门，二者可以滑动，当宽度小的时候，就多重叠一些，宽度大的时候，就少重叠一些。</p>
</div>
</div>
</body>
</html>
7.css设计焦点图，焦点图在网页中经常遇到
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>焦点图</title>
<style>
* {
margin: 0;
padding: 0;
}
#menu { /*dl标记类样式*/
position: relative; /*相对定位*/
height: 454px; /*高度*/
width: 730px; /*宽度*/
background: #ccc; /*dl标记的背景颜色*/
text-align: center;
margin: 6px auto;
}
#menu dt { /*dt样式类*/
position: absolute; /*绝对定位*/
right: 5px; /*右边框离父级元素的距离*/
bottom: 5px; /*下边框离父级元素的距离*/
}
#menu dt a { /*a样式类*/
float: left; /*左对齐*/
display: block; /*定义为块级元素*/
padding: 1px 4px;
border: 1px solid #ccc; /*为列表项加边框*/
margin-left: 2px;
text-decoration: none; /*不显示下划线*/
color: #309; /*字体颜色*/
background: #999;
font-size: 12px;
}
#menu dt a:hover { /*鼠标悬停时的a样式类*/
background: #fff;
color: #FF0000;
}
#menu dd { /*dd类样式*/
width: 730px; /*宽度*/
height: 454px; /*高度*/
overflow: hidden; /*隐藏溢出*/
}
</style>
</head>
<body>
<dl id="menu">
<dt>
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
</dt>
<dd>
<img src="//freemuban.com/img/2020041716461.jpg" id="img1"/>
<img src="//freemuban.com/img/2020041716462.jpg" id="img2"/>
<img src="//freemuban.com/img/2020041716463.jpg" id="img3"/>
<img src="//freemuban.com/img/2020041716464.jpg" id="img4"/>
</dd>
</dl>
</body>
</html>
