一个简单的网页布局HTML+CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>主页面</title> <style type="text/css"> body{
margin: 0px;
padding: 0px;
} #container{
margin: 0 auto;
width:1350px;
height: 620px;
background-color: #fff;
} #header{
width:100%;
height: 100px;
background-color: #0ff;
/*font-size: 30px;
font-family: 楷体;*/
/*text-align: center;
line-height: 100px;*/ } #main{
width:100%;
height: 400px;
background-color: black; } #footer{
width:100%;
height: 100px;
background-color: #ff0; } .nav{
width: 100%;
height: 10px;
} #left{ width: 670px;
height: 400px;
background-color: red;
float:left; } #right{
width: 670px;
height: 400px;
background-color: #f0f;
float: right; } #vertical_nav{
width: 10px;
height: 400px;
background-color: #fff;
float: left;
} .right_article{
width: 100%;
height: 85px;
background-color: #ccc;
line-height: 85px;
text-align: center;
font-size: 30px;
/*text-decoration: none;*/
}
.right_article a{
text-decoration: none;
}
.article_nav{
width: 100%;
height: 20px;
background-color: #fff; } #footer ul{
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: 幼圆;
line-height: 100px;
} #footer ul li{ float: left;
margin-left: 200px;
font-size: 20px
} #header #title{
float:left;
width: 1200px;
height: 100%;
font-size: 30px;
font-family: 楷体;
line-height: 100px; /* 不能用100%*/
text-align: center;
} #header #login_or_register{
float: left;
margin-top: 20px;
/*background-color: red;*/
width: 100px;
height: 40px;
font-size: 17px;
font-family: 楷体;
/*border: 3px solid #f00;*/ }
#header #login_or_register a{
text-decoration: none;
}
/* #header login_or_register .op
{
float:left; margin-top: 10px;
}*/
/*#header ul li{
float: left;
}*/
/*#header #login_or_register{
float: left;
}*/ </style> </head> <body>
<div id="container">
<div id="header">
<div id="title"><span>我的个人网站</sapn></div>
<div id="login_or_register">
<a href="">登录</a> | <a href="">注册</a>
</div> </div> <div class="nav"></div> <div id="main">
<div id="left">
</div> <div id="vertical_nav"></div> <div id="right">
<div id="article_one" class="right_article">
<span><a href="http://www.baidu.com" target="_blank">第一篇文章</a></span>
</div> <div class="article_nav"></div> <div id="article_two" class="right_article"> <span><a href="">第二篇文章</a></span>
</div> <div class="article_nav"></div> <div id="article_three" class="right_article"> <span><a href="">第三篇文章</a></span>
</div> <div class="article_nav"></div> <div id="article_four"class="right_article"> <span><a href="">第四篇文章</a></span>
</div> </div>
</div> <div class="nav"></div> <div id="footer">
<ul>
<li>网站首页</li>
<li>关于我们</li>
<li>联系方式</li>
<li>公司简介</li>
</ul>
</div>
</div> </body>
</html> </body>
</html>
<div></div> </body>
</html> </body>
</html>
一个简单的网页布局HTML+CSS的更多相关文章
- Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- jmeter压力测试的简单实例+badboy脚本录制（一个简单的网页用户登录测试的结果）
JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter ...
- python实现的一个简单的网页爬虫
学习了下python,看了一个简单的网页爬虫:http://www.cnblogs.com/fnng/p/3576154.html 自己实现了一个简单的网页爬虫,获取豆瓣的最新电影信息. 爬虫主要是获 ...
- CSS简单的网页布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- HTML实例之简单的网页布局
需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...
随机推荐
- [转]在EntityFramework6中执行SQL语句
本文转自:http://www.cnblogs.com/wujingtao/p/5412329.html 在上一节中我介绍了如何使用EF6对数据库实现CRDU以及事务,我们没有写一句SQL就完成了所有 ...
- 《Inside UE4》-1-基础概念
<Inside UE4>-1-基础概念 InsideUE4 创建测试项目 接上文的准备工作,双击生成的UE4Editor.exe,选择创建测试C++空项目Hello(以后的源码分析 ...
- USACO八皇后
VIS 0 1 2分别竖线和两个对角线,参见对角线(x,y)的和 差关系表 #include<iostream> #include<cstdio> #include<al ...
- AC日记——二叉树最大宽度和高度 1501 codevs
1501 二叉树最大宽度和高度 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 给出一个二叉树,输出它的最大宽 ...
- [No00004A]为什么你看了很多书，却依然没有洞见
摘要: 前几天有人在知乎上问:今天就回答下很多人问了很久的这个问题,并且解释一下如何构建系统化的知识体系.我想很多人看到这个问题,期待的答案是一个书单,可是我要告诉你这并没有什么卵用.我想大部分人都经 ...
- HTML 学习笔记 CSS样式（背景）
背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
- javascript中在链表中向前（向后）移动n个节点
1.概念 在链表上移动n个节点,我第一眼看到这个需求的时候首先想到的是当前节点.使用这个当前节点作为参考来移动,没有这个当前节点的话是没有办法在链表上前进和后退的.初始化定义链表的时候定义一个当前节 ...
- 030医疗项目-模块三：药品供应商目录模块——供货商药品目录查询功能----------Dao层：基本的查询语句的编写
我们安装显示的要求: 我们能看到显示的目录里面有:供货企业的名字(这个数据来自于供货商的表[usergys]),流水号,通用名,剂型(这些都来自药品信息表),供货的状态(这个呢在gysypml_con ...
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- React Native中设计主题机制
昨天和同事讨论组件隔离性的时候讨论到关于默认样式的问题:很多情况下我们希望能够把组件设计为通用的,然后在具体项目中给他们指定一些通用的样式,譬如:背景颜色.默认字体等等.这听起来在CSS下运作起来就很 ...