web开发-html和css开发实例-学习笔记三

最新推荐文章于 2021-06-15 22:24:56 发布

xuesnowce

最新推荐文章于 2021-06-15 22:24:56 发布

阅读量585

点赞数

本文链接：https://blog.csdn.net/xuesnowce/article/details/65938154

版权

学习记录专栏收录该内容

29 篇文章 0 订阅

订阅专栏

网页开发实例：div+css实现

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>titl</title>
</head>
<link rel="stylesheet" href="fonts/latofonts.css"/>
<style>
 body{
 padding: 0;
 margin: 0;
 }
 div,input,textarea {
 Box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 }
 .myDiv{
 width:1440px;
 height:827px;
 background-color: #ffffff;
 padding:0px auto 0px;
 position: absolute;
 }
 .my_1_Div{
 width:1030px;
 height:537px;
 background-color: #f9f9f9;
 margin-left: auto;
 margin-right: auto;
 margin-top: 14px;
 }
 .topDiv{
 width:100%;
 height:83px;
 text-align:center;
 }
 .des1Div{
 margin-top:23px;
 }
 .bottomDiv{
 width:610px;
 height:426px;
 margin-left: 210px;
 background-color: #ffffff;
 padding-left: 35px;
 }
 .des2Div{
 font-size: 20px;
 color: #22a2a1;
 font-family: LatoWebBlack;
 letter-spacing:1px;
 padding-top: 39px;
 }
 .des3Div{
 font-size: 17px;
 color: #13243f;
 font-family: LatoWebSemibold;
 line-height: 23px;
 margin-top: 16px;
 }
 .des4Div{
 font-size: 17px;
 color: #13243f;
 font-family: LatoWebSemibold;
 line-height: 23px;
 margin-top: 9px;
 max-width: 538px;
 }
 .des5Div{
 font-size: 48px;
 color: #13243f;
 font-family: LatoWebSemibold;
 margin: 32px 221px 32px 195px;
 }
 .des6Div{
 font-size:17px;
 color: #13243f;
 font-family: LatoWebSemibold;
 max-width: 538px;
 line-height: 23px;
 margin-bottom: 19px;
 }
 .des7Div{
 color: #219290;
 font-family: LatoWebBlack;
 }
 .des8Div{
 font-size:17px;
 color: #13243f;
 font-family: LatoWebSemibold;
 margin-bottom: 2px;
 }
 .des9Div{
 font-size:17px;
 color: #13243f;
 font-family: LatoWebSemibold;
 }
</style>
<body>
<div class = "myDiv">
 <div class="my_1_Div">
 <div class = "topDiv">
 <img class="des1Div" src="http://image.png">
</div>
 <div class="bottomDiv">
 <div class="des2Div">
 aaaaaaaaaaaaaaaaaaaa
</div>
 <div class="des3Div">
 bbbbbbbbbbbbbbbbbbbbbbbbb
</div>
 <div class="des4Div">
 ccccccccccccccccccccccccc
</div>
 <div class="des5Div">
 ddddddddddddddddddddddd
</div>
 <div class="des6Div">
 eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
 <span class="des7Div">
 eeeeeeeeeeeeeeeeeee
</span>
</div>
 <div class="des8Div">
 fffffffffffffffffffffff
</div>
 <div class="des9Div">
 gggggggggggggggggggggggggggggg
</div>
</div>
</div>
</div>
</div>
</body>
</html>

xuesnowce

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web开发-html和css开发实例-学习笔记三

网页开发实例：div+css实现例：html>html lang="en">head> meta charset="UTF-8"> title>titltitle>head>link rel="stylesheet" href="fonts/latofonts.css"/>style> body{ padding: 0; margin: 0; } d
复制链接

扫一扫