在Dreamwaver上基于HTML编写自己的

最新推荐文章于 2022-03-29 16:25:55 发布

德钦

最新推荐文章于 2022-03-29 16:25:55 发布

阅读量643

点赞数 1

分类专栏：得荣 my heart Rich Boy Lover Boy MADNESS 塔城文章标签： HTML DIV

本文链接：https://blog.csdn.net/quyuquan2014/article/details/83314592

版权

得荣同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

my heart

24 篇文章 0 订阅

订阅专栏

Lover Boy

21 篇文章 0 订阅

订阅专栏

Dreamwaver

一个方便于HTML开发者的编辑器
可以在这里下载

HTML中的 div

div 是HTML中的块模块的编写
我的思想是将我自己要写的板块和内容利DIV分成一个一个模块
并且分别去定义各个模块的作用是什么

代码

<!DOCTYPE html>
<html>

<head>
<style>
#header1 {
    background-color:deepskyblue;
    color:black;
    text-align:center;
    padding:10px;
	font-size: 40px
}
#nav {
    line-height:30px;
    background-color:salmon;
    height:380px;
    width:200px;
	color: black;
    float:left;
    padding:10px;	
	font-size: 20px
}
#header2 {
    background-color:brown;
    color:black;
    text-align:center;
    padding:2px;
	font-size: 15px
	}
#section1 {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#section2 {
    width:350px;
    float:right;
    padding:10px;	 	 
}
#footer {
    background-color:saddlebrown;
    color:white;
	clear: both;<!--这是不予许浮动元素-->
    text-align:center;
    padding:2px;	
	font-size: 20px;
}
#section3{
     width:350px;
    float:left;
    padding:10px;
	font-size: 30px
	}
#section4{
     width:350px;
    float:right;
    padding:10px;
	font-size: 30px
	}
</style>
</head>

<body>

<div id="header1">
<b>自 我 介 绍</b>
</div>

<div id="nav">
<b>姓名：瞿于荃</b><br>
<b>学校：昆明理工大学<b><br>
<b>爱好：旅行<b><br>
<b>家乡：陕西汉中<b><br>
<a href="https://blog.csdn.net/quyuquan2014/">我的CSDN</a>
	<img src="/E:/IMG_2236.jpeg" height="230">
</div>

<div id="header2">
<h1>旅行经历</h1>
	</div>
	<div id="section1">
<p><strong>
敦煌：大漠孤烟直，长河落日圆。<img src="/e:/damo.jpg" width="250" height="100" align="bottom">
</strong></p>
<p> 青海湖：中国第一大湖的波澜壮阔。 <img src="/E:/qinghaihu.jpg" width="250" height="100">
	</p>
<p>
	</div>
	<div id="section2">
德钦：从未被人类征服的卡瓦格博。<img src="/E:/1540286914984.jpeg" width="250" height="100">
</p>
<p>
三亚：中国的马尔代夫。<img src="/E:/IMG_20181005_125943.jpg" width="250" height="100">
</p>
</div>

<div id="footer">
<p>本人必备技能</p>
</div>
<div id="section3">
<p>滑雪<img src="/E:/huaxue.jpg" weight="100" height="250" >
	</p>
<p>浮潜<img src="/E:/fuqian.jpg" weight="100" height="250" align="botton">
		</p>
<p>徒步<img src="/E:/tubu.jpg" weight="100" height="250">
	</p>
	</div>
<div id="section4">
<p>摄影<img src="/E:/sheying.png" weight="100" height="200">
	</p>
<p>足球<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540306438855&di=00002ff0166dd2e1b26960eae3090ffd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb7fd5266d0160924d7b0cf3dde0735fae6cd347a.jpg" weight="100" height="250">
		</p>
<p>吉他<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540306522451&di=5958d85e32bd254daf117c2746c52514&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4bed2e738bd4b31c385fe8728dd6277f9f2ff89c.jpg" height="250" weight="100">
	</p>
</body>
</html>