前端学习（六）
来源：互联网 发布：家庭资产负债表 知乎 编辑：程序博客网 时间：2024/05/20 14:19
我的代码：
<!--task1_6_1.html--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>task1_6_1</title> <link rel="stylesheet" href="D:\work\task1_6_1.css"></head><body class="body "> <div class="page"> <div class="head"> <p class="title">ife.baidu.com</p> <p class="date">2016.03</p> </div> <div class="line1"></div> <div class="img"> <img src="D:\work\image\6_1.png"> </div> <div class="line2"> <p class="text1">ABOUT</p> <p class="text2">TECHNOLOGE</p> <p class="text3">About technologe about technologe about technologe</p> <p class="text4">700</p> <p class="text5">3.2</p> <p class="text6">CSS</p> <p class="text7">csscsscsscsscsscss</p> </div> <div class="main"> <div class="part1"> <p class="what">What</p> <p class="font1">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p> </div> <div class="part2"> <p class="when">When</p> <p class="font1">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p> </div> <div class="part3"> <p class="how">How</p> <p class="font2">前端前端前端前端前<br/>前端前端前端前端前端前<br/>前端前端前端</p> <br/> <p class="font3">What--------<span>40%</span></p> <p class="font3">What--------<span>30%</span></p> <p class="font3">What--------<span>30%</span></p> </div> </div> <div class="title1"> <div class="left"> <p class="font4"><span>THE</span> TECHNOLOGE<br/>OF FRONT</p> <p class="font5">前端技术领域</p> <div class="line3"></div> <div class="content"> <p class="first"><span>前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前 <img class="img2" src="D:\work\image\3.png"/> 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端</p> <p class="p2">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p> <p class="p2">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p> </div> </div> <div class="right"> <img class="img3" src="D:\work\image\2.png"/> <div class="title2"> <div class="title3"> <p class="text8"><span>前端技术</span>前端技术前端技术</p> </div> </div> <div class="content2"> <ul class="con_box"> <li><span class="tri"></span>前端前端前端前端前端前端.......................<span class="toright">前端</span></li> <li><span class="tri"></span>前端前端......................................<span class="toright">前端前</span></li> <li><span class="tri"></span>前端前端前端前端前端前端前端...................<span class="toright">前端</span></li> </ul> <div class="red"> <span class="zero">0</span> <div class="line4"> <p class="let">ONE TWO </p> <p class="let">THREE FOUR FIVE</p> <p class="word">hello world hello world</p> <p class="word">hello world</p> </div> </div> <div class="hello"> <p><span class="lquote">“</span>world hello world</p> <p>hello world hello world</p> <p>hello world hello world</p> <p>hello world hello world </p> <p>hello world hello world </p> <p>hello world<span class="rquote">”</span></p> </div> </div> </div> </div> <div class="foot"> <p>ife.bai.com</p> </div> </div></body></html>//task1_6_1.css.body{ background-color: #ccc;}.page{ width: 980px; height: 1386px; background-color: white; position: absolute; top:30px; left: 50%; margin-left: -490px;}.head{ width: 110px; height: 61px; position: absolute; top:0px; left:44px; background-color: #dc143c;}.title{ font-family: Simhei; font-size: 12px; position:absolute; top:30px; right: 15px; color: #ffffff}.date{ font-family: Simhei; font-size: 12px; color:#cc0000; position: absolute; top:35px; left:850px;}.line1{ width: 892px; border-top: 2px solid #938e8c; margin:0 auto; margin-top: 61px;}.img{ width: 641px; height: 301px; margin: 30px 44px 30px 44px; float:left;}.line2{ width: 203px; border-top: 2px solid #cc8091; margin:30px 44px 0px 0px; float: right}.text1{ font-family: Microsoft Yahei; font-size: 24px; color: #000000; text-decoration: underline; margin:10px 0px 0px 0px; }.text1:first-letter{ font-size:28px;}.text2{ font-family: Microsoft Yahei; font-size: 24px; color: #000000; text-decoration: underline; margin:0px; }.text2:first-letter{ font-size: 28px;}.text3{ font-family: Simkai; font-size: 12px; color: #000000; margin: 0px 0px 10px 0px;}.text4{ font-family: Microsoft Yahei; font-size: 116px; color: #75b86b; font-style: oblique; margin: -20px 0px 0px -20px;}.text5{ font-family: Microsoft Yahei; font-size: 55px; color: #cc8091; margin: -10px; position: relative; top:-10px; left: 0px;}.text6{ font-family: Microsoft Yahei; font-size: 21px; color: #cc8091; position:relative; top: -70px; left: 70px;}.text7{ font-family: Microsoft Yahei; font-size: 12px; color: #cc8091; position: relative; top:-95px; left: 70px;}.main{ width: 641px; margin: 364px 0px 0px 44px;}.part1{ width: 216px; position: absolute; left: 44px;}.what{ font-family: Microsoft Yahei; font-size: 16px; font-weight: bold; text-decoration: underline; color: #418c59; margin: 0;}.font1{ font-family: SimSun; font-size:12px; color: #767777; margin-top:16px; line-height: 1.5;}.part2{ position: relative; width: 204px; margin: 0 200px 0 258px ;}.when{ font-family: Microsoft Yahei; font-size: 16px; font-weight: bold; text-decoration: underline; color: #d2994f; margin: 0;}.part3{ width: 161px; position: absolute; left:540px; top:426px;}.how{ font-family: Microsoft Yahei; font-size: 16px; font-weight: bold; text-decoration: underline; color: #cc7680; margin: 0;}.font2{ font-family: SimSun; font-size:12px; color: #767777; margin-top:16px; line-height: 1.5;}.font3{ font-family: Microsoft Yahei; font-size:12px; color: #767777; margin:8px 0px;}.font3 span{ color: #cd4a48; font-style: italic; opacity:0.7;}.title1{ width: 892px; margin:0 auto;}.left{ width: 415px; position: relative; top:40px;}.font4{ font-family: Simhei; font-size: 42px; color:#11456b; font-weight: bold; margin:0; line-height: 1;}.font4 span{ font-size: 72px; color: #f5e327; font-style: oblique;}.font5{ font-family: Simhei; font-size: 33px; color:#11456b; font-weight: bold; margin-top:16px;}.line3{ width: 415px; margin: -20px 0 0 0; border-top: 2px solid #11456b;}.content{ width: 415px; font-family: SimSun; font-size: 12px; color: #767777; line-height: 16px; float: left; left: 44px;}.first{ margin: 30px 0 0 0;}/*首字下沉*/.first span{ font-family: Microsoft Yahei; font-size: 70px; color: #f5e327; float: left; text-align: center; width: 70px; height: 70px; line-height: 70px;}.img2{ width: 150px; height: 260px; float: right; margin: 5px 0px 5px 5px;}.p1{ margin: 0;}.p2{ text-indent: 2em; margin: 0;}.right{ width: 485px; position: relative; left: 420px; top:-580px;}.img3{ width: 458px; height: 275px; margin-left: 30px;}.content2{ background-color: #f5f5dc; width: 459px; height: 318px; position: relative; top:-60px; left: 30px;}.title2{ width: 458px; height: 61px; position: relative; background-color: black; opacity: 0.5; top:-75px; left: 30px;}.title3{ width: 900px; height: 44px; position: relative; left: 40px; top:10px; border-left: 3px solid #72b16a;}.text8{ font-family: Microsoft Yahei; font-size: 12px; font-style: oblique; color:#72b16a; letter-spacing: 140%;}.text8 span{ font-size: 26px; font-style: normal; color: #ffffff; padding:10px;}.con_box{ padding:20px; list-style: none;}.con_box li{ width: 434px;; margin-bottom: 20px; font: 16px "宋体"; color: #5a5b5b; float: left;}.tri{ display: inline-block; margin: 0 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #10456b;}.toright{ padding-top: 5px; float: right; font-size: 12px; font-style: oblique;}.red{ width: 260px; height: 160px; position: absolute; background-color: #dc143c; top:160px;}.zero{ font-family: Microsoft Yahei; font-size: 110px; color: #ffffff; margin: 0 auto; margin-left: 10px;}.line4{ width: 150px; height: 86px; position: relative; left: 80px; top:-110px; border-left:2px solid #ffffff; }.let{ font-family: Simhei; font-size: 21px; font-style: oblique; color: #ffffff; margin:0 10px 10px 10px;}.word{ font-family: Simhei; font-size: 12px; color: #ffffff; margin:0 10px 3px 10px;}.hello{ position: relative; left:270px; top: 20px;}.hello p{ font-family: Simhei; font-size: 14px; font-style: oblique; color: #5a5b5b; margin-top:8px; margin-bottom:8px;}.lquote{ font-size: 72px; color: #d45d5c; float: left; margin-top: -10px; margin-left: -50px; margin-right: 15px; margin-bottom: -50px;}.rquote{ font-size: 72px; color: #d45d5c; float: right; margin-top: -10px; margin-right:300px; margin-bottom: -50px;}.foot{ width: 892px; margin: 0 auto; border-top: 1px solid #938e8c; position: relative; top:-610px;}.foot p{ font-family: Simhei; font-size: 12px; color: #d45d5c; float: right; margin-top:0px;}问题：试图缩放网页截图，结果全乱了。。。。？？。。。
0 0
- 前端学习（六）
- 前端学习笔记（六）
- 前端学习总结（六）Bootstrap
- 前端技术学习之选择器（六）
- 前端面试（六）
- 前端学习（六）回调，异步，非阻塞，事件驱动等知识
- 前端试题大综合练习（六）
- JavaScript学习（六）
- 学习笔记（六）
- 入门学习（六）
- Oracle学习（六）
- 学习笔记（六）
- jquery学习（六）
- Wix学习（六）
- mybatis学习（六）
- Primer学习（六）
- http学习（六）
- 学习OpenCV（六）
- C++友元1
- Eclipse构建maven的Web项目
- Oracle rac配置Weblogic数据源(实例名及URL的选择)
- javascript中json数据添加元素
- Mysql的最佳优化经验20多条
- 前端学习（六）
- node js 学习笔记（一） 常用模块介绍
- Hive的学习笔记1-hive的安装和mysql的连接
- mysql创建用户两次授权
- 关于iframe中datagrid的高度自适应
- design support library八大模块
- iOS开发网络篇—HTTP协议
- Easyui Datagrid自动调整行号大小
- 使用Retrofit2 RxJava 文件上传
