一个简单地网站
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background:cyan;
}
a{
text-decoration:none;
}
div{
background:gray;
margin-left:10px;
margin-bottom:10px;
float:left;
}
.title1{
background:honeydew;
width:1000px;
height:50px;
margin-left:180px;
text-align:center;
}
.clear:after{
content:"";
display:block;
clear:both;
}
.red{
width:630px;
height:377px;
margin-left:30px;
background:plum;
/* text-align: center; */
}
.red img{
width: 500px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.blue{
width:360px;
height:377px;
background:#28FF28;
overflow:auto;
}
.blue1{
width:280px;
height:1200px;
float: right;
background:#28FF28;
overflow:auto;
}
.whilte{
width:370px;
height:233px;
clear:left;
background:#B8B8DC;
margin-left:30px;
}
.title1 a{
color:red;
font-size:36px;
}
.green{
width:200px;
height:233px;
background:#B8B8DC;
}
.gray{
width:200px;
height:233px;
background:#B8B8DC;
}
.yellow{
width:200px;
height:233px;
background:#B8B8DC;
}
p.iamp span {
font-weight:bold;
color:#ff9955;
padding-left:2em;
}
.blue h1{
color:red;
}
.超链接{
background:ivory;
width:1000px;
height:50px;
margin-left:30px;
text-align:center;
font-size:36px;
}
.超链接 a{
font-size:36px;
color:red;
}
.video1{
background:cadetblue;
width:1000px;
height: 440px;
margin-left:30px;
text-align:center;
font-size:36px;
}
.video1 video{
margin-top: 20px;
}
.input1{
background:gainsboro;
width:1000px;
height:50px;
margin-left:30px;
text-align:center;
font-size:36px;
}
</style>
</head>
<body>
<div class = "title1" target="_blank">
<a href="https://www.cnblogs.com/">WELOCOME CNBLOGS！！</a>
</div>
<div class ="red">
<img src="C:/Users/18368/Desktop/th1.jpg" />
</div>
<div class = "blue">
<h1 ><center>PYTHON ZEN</center> </h1>
<p class = "iamp"><span></span>The Zen of Python, by Tim Peters
Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.<br/>
<span></span>Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.<br/>
<span></span>Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.<br/>
<span></span>In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.<br/>
<span></span>Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!</p>
</div>
<div class = "blue1">
<h1 ><center>PYTHON ZEN</center> </h1>
<p class = "iamp"><span></span>The Zen of Python, by Tim Peters
Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.<br/>
<span></span>Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.<br/>
<span></span>Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.<br/>
<span></span>In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.<br/>
<span></span>Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!
<span></span>The Zen of Python, by Tim Peters
Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.<br/>
<span></span>Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.<br/>
<span></span>Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.<br/>
<span></span>In the face of ambiguity, refuse the temptation to guess.
There should be one-- and preferably only one --obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.<br/>
<span></span>Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!</p>
</div>
<div class = "whilte">
<img src="C:/Users/18368/Desktop/cat1.jpg" width=370 height=233/>
</div>
<div class = "green">
<img src="C:/Users/18368/Desktop/cat2.jpg" width=200 height=233/>
</div>
<div class = "gray">
<img src="C:/Users/18368/Desktop/cat3.jpg" width=200 height=233/>
</div>
<div class = "yellow">
<img src="C:/Users/18368/Desktop/cat4.jpg" width=200 height=233/>
</div>
<div class = "超链接">
<a href="D:/EditPlus/old%20files2/templatex.html">新页面</a>
</div>
<div class="video1">
<video src="D:/成为沃伦巴菲特BD中英双字.mp4" poster="" autoplay loop controls></video>
</div>
<div class="input1">
<button type="button">Click Me!</button>
<a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function changeColor()
{
document.getElementById("test").style.background="#98F5FF";
}
</script>
<style>
div{
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
fb
.hello:after{
content:"";
display:block;
clear:both;
}
.world{
width: 400px;
height:400px;
background:gray;
float:left;
overflow:auto;
position:absolute;
/* border-radius: 20px; */
}
.hello{
background:lightblue;
}
.xiaojiang{
width:500px;
height:500px;
background:yellow;
margin-top:40px;
}
.title{
color:green;
}
.超链接{
background:blue;
height:50px;
text-align:center;
font-size:36px;
}
.超链接 a{
font-size:36px;
color:red;
}
.circle{
width: 100px;
height: 100px;
background-color:cornflowerblue;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
</style>
</head>
<body style="background: cadetblue;">
<div class = "hello">
<h1 align="center">Hello World</h1>
<div class = "xiaojiang"></div>
<div class = "world">
转移字符的空格。hdgggggggggggggggggg
ggggkkaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaggggggggaaaaaaa
aaaaaa这样写好像没什么必要，直接写空格
就可以，而且貌似浏览器对生成内容中的转
最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。
水平居中直接加上标签即可，或者设置margin:auto;当然也可以用下面的方法
下面说两种在屏幕正中（水平居中+垂直居中）的方法
放上示范的html代码：
1
2
3
4
5
方法一：
div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。
.main{
text-align: center; /*让div内部文字居中*/
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
效果如图：
---------------------
作者：_吟游诗人
来源：CSDN
原文：https://blog.csdn.net/qq_32623363/article/details/77101971
版权声明：本文为博主原创文章，转载请附上博文链接！
义字符的</div>
</div>
<div class = "超链接">
<a href="D:/EditPlus/old%20files2/index.html">返回首页</a>
</div>
<div class = "circle" onclick="changeColor()"></div>
</body>
</html>
