博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
自定义webUI实例
阅读量:4841 次
发布时间:2019-06-11

本文共 2409 字,大约阅读时间需要 8 分钟。

global.css

@charset "utf-8";

body {
margin: 0 auto;
font-size: 12px;
font-family: Verdana;
line-height: 1.5;
}
ul, dl, dd, h1, h2, h3, h4, h5, h6, form, p {
padding: 0;
margin: 0;
}
h1 {
font-size: 20px;
font-family: "microsoft yahei";
}
h2 {
font-size: 14px;
}
h3 {
font-size: 14px;
font-weight: normal;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 12px;
font-weight: normal;
}
ul {
list-style: none;
}
img {
border: 0px;
}
a {
color: #195cb5;
text-decoration: none;
}
a:hover {
color: #f00;
}
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}

layout.css

@charset "utf-8";

@import url("global.css");
#container {
margin: 0 auto;
width: 950px;
}
#header {
height: 50px;
background: #ff911a;
}
#header h1 {
padding: 10px 20px;
}
#nav {
background: #ff6600;
height: 24px;
margin-bottom: 6px;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 4px 10px 2px 10px;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
text-decoration: underline;
}
/*main*/
#mainContent {
overflow: auto;
zoom: 1;
margin-bottom: 6px;
}
#side {
width: 200px;
float: left;
}
.sidebox {
border: 1px solid #ed6400;
margin-bottom: 6px;
}
.sidebox h4{
background: #ff911a;
padding: 2px 6px;
border-bottom: 1px solid #ed6400;
color: #fff;
}
#main {
width: 742px;
float: right;
}
.mainbox {
border: 1px solid #ed6400;
margin-bottom: 6px;
}
.mainbox h2 {
background: #ff911a;
padding: 2px 6px;
border-bottom: 1px solid #ed6400;
color: #fff;
}
.mainbox ul {
padding: 4px 6px;
}
/*footer*/
#footer {
border-top: 3px solid #ccc;
height: 50px;
text-align: center;
padding: 6px;
}

test.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>common</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div class="clearfloat"></div>
<div id="nav">
<ul>
<li><a href="#">nav 1</a></li>
<li><a href="#">nav 2</a></li>
<li><a href="#">nav 3</a></li>
<li><a href="#">nav 4</a></li>
<li><a href="#">nav 5</a></li>
</ul>
</div>
<div id="mainContent">
<div id="main">
<div class="mainbox">
<h2>title</h2>
<ul>content</ul>
</div>
</div>
<div id="side">
<div class="sidebox">
<h4>title</h4>
<ul>content</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/feilv/p/4128929.html

你可能感兴趣的文章
菜根谭#222
查看>>
java-01-java基础知识1
查看>>
.net面试题型
查看>>
sweetalert弹窗的使用
查看>>
php Redis函数使用总结(string,hash,list, set , sort set )
查看>>
博客将迁至CSDN
查看>>
使用 JavaScript 截屏
查看>>
常见可控硅带驱动 光耦 三极管 电阻三种方式
查看>>
HDU 3360 National Treasures 奇偶匹配的最低点覆盖
查看>>
百度地图 Android SDK - 新的版本号(v3.2.0)正式上线
查看>>
malloc功能具体解释
查看>>
XMLHTTP使用具体解释
查看>>
HighCharts 具体使用及API文档说明
查看>>
9. 尽可能用UNION ALL取代UNION
查看>>
exports,module对象
查看>>
Win XP登录账户10大问题
查看>>
网站数据分析二:网站流量分析
查看>>
观察者模式之使用委托和事件实现
查看>>
XSS攻击总结
查看>>
servlet访问路径的写法
查看>>