html的代码

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
    <title></title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <div id="container">
        <header>
            <div class="ife">
                <p>ife.baidu.com</p>
            </div>
            <p class="date">2017.06</p>
            <hr class="underline_one">
        </header>
        <section class="one">
            <div class="img_one">
                <img src="data:image/1.jpg">
                <div class="left_image"></div>
                <div class="right_image"></div>
            </div>

<div class="aside">
                <hr>
                <p class="ziti"><strong>A</strong>bout</p>
                <p class="ziti"><strong>T</strong>echnologe</p>
                <p class="ziti1">About technologe About technologe About technologe</p>
                <p class="num">700</p>
                <div class="aside_down" >
                    <p class="mark_1">3.2</p>
                    <p class="mark_2">css</p>
                    <p class="mark_3">csscssscsscsscsscss</p>
                </div>
            </div>
        </section>

<section class="wwh">
            <div class="what">
                <h2>what</h2>
                <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
            </div>
            <div class="when">
                <h2>when</h2>
                <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
            </div>
            <div class="how">
                <h2>how</h2>
                <p>前端前端前端前端前端</p>
                <p>前端前端前端</p>
                <p>前端前端</p>
            </div>
            <div class="what_3">
                <p>
                    what-------- <span>40%</span>
                </p>
                <p>
                    when-------- <span>30%</span>
                </p>
                <p>
                    how-------- <span>30%</span>
                </p>
            </div>
        </section>
        <section class="article">
            <div class="atr_1" >
                <div class="art_up">
                    <p class="mark_one"><span>THE</span>TECHNOLOGE <br>前端技术领域 <br></p>
                    <hr class="underline">
                </div>

<div class="art_down">
                    <p><span>前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                    <img src="data:image/2.jpg">
                    <p class="article1">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
                    <p class="article2">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                </div>
            </div>

<div class="art_r">
                <div class="art_r_up">
                    <img src="data:image/3.jpg">
                    <div class="mark_one"></div>
                    <p class="describe">
                    <span class="des_one">前端技术</span><span class="des_two">&nbsp;&nbsp;前端技术前端技术</span>
                    </p>
                </div>
                
                <div class="art_r_down">
                    <p>
                        <span class="tt"><img src="data:image/4.png"></span>
                        <span class="mark_one">前端技术前端技术前端技术...............</span>
                        <span class="mark_word">前端</span>
                    <br>
                    <span class="tt"><img src="data:image/4.png"></span>
                        <span class="mark_one">前端技术前端技术前端技术...............</span>
                        <span class="mark_word">前端</span>
                    <br>
                    <span class="tt"><img src="data:image/4.png"></span>
                        <span class="mark_one">前端技术前端技术前端技术...............</span>
                        <span class="mark_word">前端</span>
                    </p>
                
                <div class="art_r_down1">
                        <span>0</span>
                        <div class="line">
                            <p class="mark_one">ONE TWO <br> THREE FOUR FIVE</p>
                            <p class="mark_two">hello world hello world <br> hello world</p>
                        </div>
                </div>
                <div class="art_r_down_r">

<img src="data:image/5.png">
                        <img src="data:image/5.png">
                        <span >

world hello world

hello world hello world

hello world hello world

hello world hello world

hello world hello world

hello world

</span>
                        <img src="data:image/6.png">
                        <img src="data:image/6.png">
                        
                </div>    
            </div>
        </div>
        </section>
        <footer>

<p class="ife_url">ife.baidu.com</p>

</footer>
    </div>
</body>

</html>

css代码

body{

background:  #44565C;
    color:#767777;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    margin: 0 auto;
}

*{
    padding: 0;
    margin: 0;
}
#container{
    width: 980px;
    height: 1386px;
    background: #ffffff;
    padding: 0 44px;
    margin: 0 auto;
}
header .ife{
    height: 61px;
    width: 110px;
    background: #db3e75;
    position: relative;
}
header .ife p{
    color: #ffffff;
    position: absolute;
    margin-left: 4px;
    bottom: 2px;
}
header{
    margin-bottom: 30px;
    position: relative;
}
header .date{
    color:#d45d5c;
    font-family: "SimHei";
    position: absolute;
    right: 0;
    bottom: 5px;
}
header .underline_one{
    border: 2px solid #938e8c;
    margin-top: 0;
}
.one{
    position: relative;
}
.img_one{
    height: 641px;
    width: 301px;
}
.left_image{
    height: 301px;
    width: 191px;
    background: #72A664;
    opacity: 0.5;
    position: absolute;
    top: 0;

}
.right_image{
    height: 301px;
    width: 191px;
    background: #E1ABC3;
    opacity: 0.5;
    position: absolute;
    top: 0;
    right: 341px;
}
.aside{
    width: 203px;
    position: absolute;
    top: 0;
    right: 40px;
}
.aside hr {
    width: 240px;
    border:2px solid #cc8091;
}
.ziti{
    color: #000000;
    text-decoration: underline;
    font-size: 24px;
    font-family: "Microsoft YaHei";

}
.ziti1{
    color: #676767;
    font-family: 'STKaiti';
    margin-bottom: 10px;
    font-size: 12px;
}
.num{
    color: #75b86b;
    font-size: 116px;
    font-family: "Microsoft YaHei";
    position: absolute;
    top: 100px;

}
.aside_down{
    position: relative;
}
.mark_1{
    font-size: 55px;
    color: #cc8091;
    position: absolute;
    top: 120px;
}
.mark_2{
    font-size: 21px;
    color: #cc8091;
    position: absolute;
    top: 145px;
    right: 80px;
}
.mark_3{
    font-size: 12px;
    color: #676767;
    position: absolute;
    top: 165px;
    right: 5px;
}
.wwh{
    width: 641px;
    margin: 20px 0;
    position: absolute;
    top: 440px;
    
}
.wwh div{
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
}
.article{
    clear: both;
}
.what{
    width: 220px;
}
.what h2{
    color: #418c59;
}
.when{
    width: 190px;
}
.when h2{
    color: #d2994f;
}
.how h2{
    color: #cc7680;
}
.wwh h2{
    font-size: 16px;
    text-decoration: underline;
    margin-bottom: 10px;
}
.wwh .what_3 p{
    color: #231815;
    opacity:70%;
    margin-bottom: 16px;
}
.wwh .what_3 p span{
    color: #cd4a48;
    font-style:italic;
}
.atr_1{
    width: 415px;
    float: left;
    margin-bottom: 30px;

}
.art_up p span{
    font:italic 72px "SimHei";
    color:#f5e327;
    font-weight: 700;
    margin-right: 16px;
}
.art_up .mark_one{
    font-size: 42px;
    color:#11456b;
    font-family:"SimHei";
    font-weight: 700;
    margin-bottom: 10px;
}
.atr_1 .underline{
    border: 2px #11456b solid;
    margin-bottom: 20px;
}
.art_down p span{
    font-size: 70px;
    font-family:"SimHei";
    color: #f5e327;
    float: left;
    padding: 20px 10px 30px 0;
}
.art_down p{
    line-height: 16px;
}
.art_down .article1{
    text-indent:2em;
}
.art_down .article2{
    text-indent:2em;
}
.art_down img{
    float: right;
    padding: 20px;

}
.art_r{
    float: right;
    width: 458px;
    
}
.art_r .art_r_up{
    position: relative;
    margin-top: 15px;
}
.art_r .art_r_up img{
    width: 458px;
    height: 275px;
}
.art_r .art_r_up .mark_one{
    background: black;
    width: 458px;
    height: 61px;
    position: absolute;
    bottom: 3px;
    background-color: rgba(0,0,0,0.3);
}
.art_r .art_r_up .describe{
    position: absolute;
    bottom: 9px;
    height: 41px;
    margin-left: 70px;
    padding-left: 20px;
    border-left:3px solid #72b16a;
}
.art_r .art_r_up .describe .des_one{
    font-size: 26px;
    color: #fff;
}
.art_r .art_r_up .describe .des_two{
    font-style: italic;
    color: #72b16a;
}
.art_r .art_r_down{
    width: 459px;
    height: 318px;
    background: #eeedd6;
    margin-top: 15px;
}
.art_r .art_r_down>p{
    font: 16px;
    font-family:  "宋体";
    color: #5a5b5b;
    margin-left: 30px;
    padding-top: 26px;
    padding-bottom: 20px;
    
}
.art_r .art_r_down .mark_word{
    font-style: italic;
    font-size: 12px;
    text-align: right;
    font-family:  "宋体";
}
.art_r .art_r_down .mark_one{
    text-align: left;
    font-size: 16px;
    color: #5a5b5b;
    font-family:  "宋体";
    display: inline-block;
    padding:10px;

}
.art_r_down1{
    width:260px;
    height:160px;
    background: #ea2d70;
    position: absolute;
    top: 1200px;
}
.art_r_down1 span{
    font-size:110px;
    color:#ffffff;
    float: left;
    padding:0 10px;
}
.art_r_down1 .line{
    border-left: 2px solid #ffffff;
    height: 86px;
    float: left;
    margin-top: 35px;
}
.art_r_down1 .mark_one{
    font-size:18px;
    font-style: italic;
    color: #ffffff;
    margin-left:10px;
    margin-bottom: 20px;
}
.art_r_down1 .mark_two{
     font: 12px/10px "黑体";
     color: #fff;
    margin-left:10px;
}
.art_r_down_r{
    float: right;
    width: 180px;
    height: 130px;
    margin-top: 10px;
    margin-right: 10px;
    
}

.art_r_down_r  span{
    font: 12px "黑体";
    color: #d45d5c;
}

footer{
    clear:both;
    width: 892px;
    height: 59px;
    padding-top: 10px;
    border-top: 1px solid #938e8c;
    
}
footer .ife_url{
    float: right;
    font: 12px "黑体"; color: #d45d5c;
   
}

html基础+利用css制作海报相关推荐

  1. 利用 Css 制作精美的卡片UI （赞）

    原文出处:https://segmentfault.com/a/1190000009388832 效果图,鼠标移彩色,移出黑白                     本教程将会告诉你如何用 Html ...

  2. 利用css制作3D照片墙

    利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  3. html5实现立体照片墙效果,利用css制作3D照片墙效果

    利用css制作3D照片墙,具体代码如下所示: 无标题文档 以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...

  4. 利用CSS制作一个向右的箭头

    利用CSS制作一个向右的箭头 <style type="text/css">.box{/* 利用CSS制作一个向右的箭头 */width:200px;height:20 ...

  5. ps海报合成教程_如何利用PS制作海报？详细教程来了！

    今天能学长给大家带来一套利用PS做[月满中秋]海报的教程.福利干货到,请大家接住! 话不多说,直接上教程[月满中秋-第一课] 月满中秋-海报制作教程https://www.zhihu.com/vide ...

  6. 如何利用CSS制作星星图案

    CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...

  7. 利用CSS制作一些实用的图标

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  8. 利用css制作三角形

    1.首先制作一个正方形只设置边框 2.除了上边框其它边框都设置透明色(transparent) <style>div {width: 100px;height: 100px;border: ...

  9. 利用css制作3d图片旋转_练习

    效果: 鼠标触碰时(停止旋转并高亮): 代码: <!DOCTYPE html> <html lang="en"> <head><meta ...

最新文章

  1. android平板开发板,利用开源开发板自制的平板电脑 | 雷锋网
  2. JDK 1.6 HashMap 源码分析
  3. JavaScript-使用WeakMap创建对象的私有属性
  4. A星算法（VC版源码）
  5. android 上下滚动文字_计算机毕设项目004之Android系统在线小说阅读器
  6. 常见查找算法（Java代码实现）
  7. 单片机电源自动切换电路，mos双电源自动切换电路，电池与usb供电自动切换电路
  8. mock数据和代码生成
  9. 什么软件可以测试QQ特别关心,qq特别关心查询工具
  10. 【数字信号处理】离散时间信号 ( 离散时间信号 与 连续时间信号 关系 | 序列表示法 | 列表法 | 函数表示法 | 图示法 )
  11. 风险预测模型_【期刊导读】侯金林教授团队发表全球首个跨病因和跨种族的慢性肝病患者肝癌风险预测模型——aMAP评分...
  12. 网络数据包的封包格式
  13. 使用MACD指标在上证指数000001.SH上开发单边多头策略
  14. Google - Android 12 更新预览
  15. Cannot serialize； nested exception is org.springframework.core.serializer
  16. CString 和 LPCTSTR 之间的转换 及 LPSTR、LPWSTR、LPCSTR、LPCWSTR、LPTSTR、LPCTSTR的区分与转化
  17. docker安装报错Loading mirror speeds from cached hostfile解决方案
  18. Angelababy伴娘团礼服最丑被批心机重？赞陈妍希最贴心
  19. 【赛后诸葛】2020 力扣杯！Code Your Future 春季全国编程大赛
  20. iOS9-by-Tutorials-学习笔记五：Multitasking

热门文章

  1. 未约定经济补偿的竞业禁止条款是否无效
  2. 华为云Windows云服务器如何配置多用户登录？
  3. sed 介绍
  4. CSS实现水平居中的六种方法
  5. 计算机考研数一、408复习心得
  6. Nessus扫描设置
  7. 【工赋开发者社区】数字化转型路上不得不面对的3个问题
  8. Android iOS 开发全面对比分析
  9. 大连理工计算机科学与技术学院,本科生教育
  10. 记 · 血性红魔 · 英雄岁月