js基础

最新推荐文章于 2024-08-27 17:07:27 发布

z1827001818

最新推荐文章于 2024-08-27 17:07:27 发布

阅读量66

点赞数

文章标签： redis

本文链接：https://blog.csdn.net/z1827001818/article/details/107042843

版权

!DOCTYPE html>

Document

th1	th2	th3	th4
td1	td2	td3	td4
td1	td2	td3	td4
td1	td2	td3	td4
td1	td2	td3	td4
td1	td2	td3	td4
td1	td2	td3	td4

网页效果：案例23 简单布局1 Document

main

</article>
<footer class="footer">
    footer
</footer>

@charset "utf-8"; body{ margin:0; padding:0; } #container{ width: 980px; border:1px solid #ccc; margin:0 auto; } #container .header{ width: 100%; height: 80px; background:red; } #container .wrapper{ width: 100%; height: 600px; background:blue; margin:10px 0; } #container .wrapper .main{ background:cyan; width: 760px; height: 600px; float:left; margin:0 10px; } #container .wrapper aside{ background:pink; width: 200px; height: 400px; float:left; } #container .footer{ width: 100%; height: 120px; background:green; }网页效果：案例25 圣杯布局1 Document

main

style3.css @charset "utf-8"; /* 父容器 1.溢出时隐藏 2.设置容器的内边距padding，用来空出位置，放置左右侧边栏 */ #wrapper{ overflow:hidden; /*溢出时隐藏*/ /* 实现左侧边栏和右侧边栏 */ padding:0 200px; /* 左右分别空出200px用于放置左、右侧边栏 */ min-width:300px; border:1px solid #ccc; } /* 主体： 1.宽度自适应 2.设置一个浮动布局 */ #wrapper .main{ width: 100%; height: 300px; background:green; float:left; } #wrapper aside{ width: 190px; height: 300px; background:blue; float:left; position:relative; } #wrapper .left{ margin-left:-100%; left:-200px; } #wrapper .right{ margin-left: -190px; right:-200px; }网页效果：案例26 圣杯布局2 Document

main

style4.css @charset "utf-8"; body{ margin:0; padding:0; } #container{ margin:0 auto; } #container .header{ width: 100%; height: 80px; background:red; } #container #wrapper{ overflow:hidden; padding:0 200px; min-width:300px; margin:10px 0; } #container .main{ width: 100%; height: 400px; background:blue; float:left; } #container aside{ float:left; width: 190px; height: 300px; background:cyan; position:relative; } #container .left{ margin-left: -100%; left:-200px; } #container .right{ margin-left:-190px; left:200px; } #container .footer{ width: 100%; height: 150px; background:green; }网页效果：案例27 双飞翼布局 Document

main

style5.css @charset "utf-8"; body{ margin:0; padding:0; } #container{ margin:0 auto; } #container .header{ width: 100%; height: 80px; background:red; } #container .wrapper{ overflow:hidden; min-width:300px; margin:10px 0; } #container .main{ width: 100%; float:left; } #container .main-wrapper{ background:pink; height: 400px; margin:0 200px; } #container aside{ float:left; width: 190px; height: 300px; background:cyan; } #container .left{ margin-left: -100%; } #container .right{ margin-left:-190px; } #container .footer{ width: 100%; height: 150px; background:green; }网页效果：