CSS基础案例展示

最新推荐文章于 2023-04-06 20:48:16 发布

风云正

最新推荐文章于 2023-04-06 20:48:16 发布

阅读量536

点赞数

分类专栏： web前端文章标签： css 案例 demo

本文链接：https://blog.csdn.net/chenzheng8975/article/details/54342229

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

案例一

1.效果图
这里写图片描述
2.实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>案例一</title>
<style type="text/css">
* {margin:0;padding:0;}

#wrap {background:#00C;margin:0 auto;width:960px;}

#header {background:#FF3300;width:100%;}

#mainbody {background:#FC0;overflow:hidden;}

.left {width:800px;height:200px;background:#000;float:left;}

.right {width:140px;height:500px;background:#690;float:right;}

#footer {background:#639;width:100%;}

</style>
</head>

<body>
<div id="wrap">
  <div id="header">header</div>
  <div id="mainbody">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>

案例二

1.效果图
这里写图片描述
2.实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>案例二</title>
<style type="text/css">
* {margin:0;padding:0;}

#wrap{width:970px; margin:0 auto;}

#header {background:#FF3300;width:100%;}

#mainbody{ width:100%;overflow:hidden;position:relative; background:#0f0;}

#left{float:left;width:110px; height:487px;background:#ff0;}

#mid{float:left;margin-left:13px;width:650px; height:439px;background:#882215;}

#right{position:absolute;left:794px; width:177px; height:329px; background:#aa12a7;}

#footer {background:#639;width:100%;}

</style>
</head>

<body>
<div id="wrap">
     <div id="header">header</div>
     <div id="mainbody">
          <div id="left">left</div>
          <div id="mid">mid</div>
          <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>

风云正

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础案例展示

案例一1.效果图 2.实现代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http
复制链接

扫一扫