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;
 }
 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>

你可能感兴趣的:(学习记录)