CSS网页设计》》

最新推荐文章于 2024-06-16 23:58:27 发布
最新推荐文章于 2024-06-16 23:58:27 发布
阅读量2.3k 收藏 13
点赞数 2
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanfan_h/article/details/89713801
版权

这是跟着老师做的一个小案例，小小的有了一点成就感，下次努力

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css 网页布局</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!--头部-->
 <div class="header">
  <div class="logo">
      <img src="img/logo.png" alt="logo">
  </div>
  <div class="nav">
      <ul>
          <li>首页</li>
          <li>图片</li>
          <li>视频</li>
          <li>手记</li>
      </ul>
  </div>
 </div>
<!--主体-->
 <div class="main">
     <!-- 主体的上部-->
     <div class="top">
         <img src="img/1.png">
     </div>
     <!-- 遮罩层-->
     <div class="topLayer"></div>
     <!-- 遮罩层的上部，包括文字和按钮-->
     <div class="topLayer-top">
         <div class="word">MY BEAUTIFUL LIFE</div>
         <button>LOOK MORE &gt;</button>
     </div>
     <!-- 主体的中间部分-->
     <div class="middle">
         <div class="m-top">
             <div class="commen weibo">
                 <img src="img/weibo.png">
                 <div class="comm">MTCROBLOG</div>
             </div>
             <div class="commen weixin">
                 <img src="img/weixin.png">
                 <div class="comm">WECHAT</div>

             </div>
             <div class="commen qq">
                 <img src="img/QQ.png">
                 <div class="comm">QQ</div>
             </div>
             <div class="clear"></div>  <!--清除浮动-->
         </div>
         <div class="m-middle">
             "I want to give good things to record down,<br/>
             after the recall will be very beautiful."
         </div>
         <div class="m-bottom">
               <div class="m-com">
                   <img src="img/03-01.jpg">
                   <div class="des1">Cool Image</div>
                   <div class="des2">Record The Picture</div>
               </div>
               <div class="m-com">
                   <img src="img/03-02.jpg">
                   <div class="des1">Great Picture</div>
                   <div class="des2">Record The Picture</div>
               </div>
               <div class="m-com">
                   <img src="img/03-03.jpg">
                   <div class="des1">Cool Image</div>
                   <div class="des2">Record The Picture</div>
               </div>
         </div>
         <div class="clear"></div>
         <!--主体的下部-->
     <div class="bottom">
               <div class="content">
                   <div class="title">FROM THE PHOTO ALBUM</div>
                   <div class="pic-content">
                       <dl>
                           <dt> <img src="img/04-01.jpg"></dt>
                           <dd class="word1">Life is like a book, just read more and more<br/>
                               refined, more write more carefully.When<br/>
                               read, mind open, all things have been<br/>
                               indifferent to heart. Life is the precipitation.</dd>
                       </dl>
                       <dl>
                           <dt> <img src="img/04-02.jpg"></dt>
                           <dd class="word1">Life is like a cup of tea, let people lead a<br/>
                               person to endless aftertastes. You again good<br/>
                               taste, it will always have a different taste,<br/>
                               different people will have different taste more.</dd>
                       </dl>
                   </div>
                   <div class="clear"></div>
               </div>
     </div>
 </div>
     <div class="clear"></div>
<!--底部-->
 <div class="footer">
     <p>作者：浅浅谦谦芊芊</p>
 </div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
.header{
    width:100%;
    height:100px;
  }
.header img{
    width:300px;
    height:85px;
    padding-left:100px;
    padding-top:8px;
}
.header .logo{
    float:left;
}
.header .nav{
    float:right;
}
.header .nav ul li{
    float:left;
    list-style-type: none;
    width:80px;
    height:100px;
    line-height:100px;
    font-size: 15px;
    font-weight:bolder;
    color:#7d7d7d;
}
.main .top{
    width:100%;
    height:600px;
}
.main .top img{width:100%;
    height:600px;
}
.main .topLayer{
    position:absolute;
    top:100px;
    left:0px;
    background-color: #000;
    width:100%;
    height:600px;
    opacity:0.5;
}
.main .topLayer-top{
    width:500px;
    height:300px;
    position:absolute;
    top:400px;
    margin-top:-150px;
    z-index:2;
    right:50%;
    margin-right:-250px;
}
.main .topLayer-top .word{
    padding-top:100px;
    color:#fff;
    font-size:45px;
    font-weight: bolder;
    text-align: center;
    font-family:" 微软雅黑";
}
.main .topLayer-top button{
    width:200px;
    height:60px;
    margin-top:50px;
    color:#fff;
    background-color:#f5704f;
    font-size:14px;
    font-weight: bolder;
    text-align: center;
    font-family:" 微软雅黑";
    border-radius:8px;    /*设置圆角*/
    margin-left:150px;
}
.main .middle{
    width:1000px;
    margin:0 auto;/*居中*/
}
.main .middle .m-top .commen{
    float:left;
    width:33.3%;
    padding-top:50px;
    text-align:center;
}
.main .middle .m-top .commen img {
    width:100px;
    height:100px;
}
.main .middle .m-top .commen .comm{
    font-size:20px;
    color:#7d7c7f;
    font-weight:bolder;
    padding-top:20px;
}
.main .middle .m-middle{
    font-size:22px;
    color:#e19796;
    font-weight:bold;
    padding-top:50px;
    font-style:italic; /*斜体*/
    text-align:center;
    padding-bottom: 50px;
}
.clear{
    clear:both;/*  清除浮动*/
}
.main .middle .m-bottom .m-com{
    float:left;
    padding:10px 10px;
    font-size:20px;
    font-weight:bold;
    text-align: center;
}
.main .middle .m-bottom .m-com img{
    width:310px;
    height:260px;
}
.main .middle .m-bottom .m-com .des1{
    padding-top:20px;
    color:#7d7d7f;

}
.main .middle .m-bottom .m-com .des2{
    padding-top:10px;
    color:#bdbdbc;
}
.main .bottom{
    background-color:#f9f9f9;
}
.main .bottom .content{
    width:1000px;
    margin:0 auto;
}
.main .bottom .content .title{
    text-align: center;
    font-size:30px;
    font-weight:bold;
    font-family:"微软雅黑";
    color:#7d7c7f;
    padding-top:50px;
    padding-bottom:50px;
}
.main .bottom .content .pic-content dl{
    float:left;
    width:470px;
    padding:10px 12px;
}
.main .bottom .content .pic-content dl img{
    width:470px;
    height:460px;
}
.main .bottom .content .pic-content dl .word1{
    padding-top:20px;
    font-size:20px;
    font-weight:bold;
    color:#7d7c7f;
    padding-bottom:50px;
}
.footer{
    width:100%
    height:500px;
    background-color:#040410;
}
.footer p{
    color:#f9f9f9;
    font-size:20px;
    text-align: center;
    padding:20px;
}

在这里插入图片描述
在这里插入图片描述

莓莓儿～
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页设计之CSS
qq_53677566的博客
10-05 1万+
文章目录CSS笔记一.CSS概述二.基本语法1.行内样式表2.内嵌样式表3.外联样式表4.各种样式表优缺点5.应用代码三.选择器（常用）1.标签选择器2.id选择器3.类选择器4.通配选择器5.选择器组合6.选择器优先级7.具体代码演示四.基本属性1.文本2.背景3.列表4.伪类5.透明五.标签分类和display属性1.块级标签2.行级标签3.行级块标签4.display属性六.div和span标签1.div2.span无可代替的标签：【重要】七.盒子模型1.内容区（content）2.内边距（paddi
HTML CSS 网页设计作业「动漫小站」
HTML网页设计
07-27 4255
关于动漫的HTML网页设计
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计与实现
最新发布
HTML网页设计
06-16 775
🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
【HTML网页设计 + CSS样式表】详细记录 / 含代码 by.Akaxi
Akaxi的博客
10-12 6159
【HTML网页设计 + CSS样式表】详细记录 / 含代码
html+css网页设计源代码
11-07
在这个“html+css网页设计源代码”中，我们有机会深入理解这两种语言如何协同工作，创建出具有专业外观和功能的网站。 HTML是网页的基础，它定义了网页的结构和内容。在提供的"html3"文件中，我们可以看到各种HTML...
html+css网页设计作业.zip
07-20
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。 ...
htm+css网页设计课程作业
12-16
在本压缩包“htm+css网页设计课程作业”中，包含了一个HTML和CSS的学习资源，主要涉及了HTML5和CSS3的基本概念、语法以及实际应用。这个作业项目由二十个或以上的页面组成，展示了作者对网页布局和设计的深入理解和...
HTML+CSS网页设计与布局从入门到精通
03-18
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
html+css网页设计源码(简洁)
12-25
HTML 和 CSS 是构建网页设计的基础，本资源提供了一套简洁的网页设计源码，适合初学者和需要快速搭建页面的开发者。这套源码充分展示了如何使用 HTML 结构元素和 CSS 样式规则来创建一个清晰、易读且具有基本功能的...
100个网页设计模板(div+css)
04-24
100个网页设计模板(div+css),方便学习
网页设计与制作(HTML+CSS+JavaScript)
01-30
网页设计与制作(HTML+CSS+JavaScript)，资源总大小：786.6MB，欢迎下载
HTML5+CSS大作业——班级网页设计(5页)
11-30 9259
HTML5+CSS大作业——班级网页设计(5页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTML期
【前端系列】36种button样式
檀越的博客
11-17 4万+
3.button 种类 "Button"可以指多种不同类型的按钮，以下是其中的一些：以下是一些 HTML 中设置按钮样式的常用方法：1.使用 CSS 样式表：可以通过 CSS 样式表来设置按钮的外观，例如设置按钮的背景色、字体颜色、边框等。 2.使用内联样式：可以在按钮标签中使用 style 属性来设置按钮的样式。 3.使用类名：可以为按钮设置一个类名，然后在 CSS 样式表中设置该类名的样式。 觉得有用的话点个赞 呗。
基于HTML+CSS+JavaScript简洁的响应式个人博客网站bootstrap网页(大学生简单个人静态HTML网页设计作品)...
qq_365392777
10-24 1582
????文章目录​​一、????‍????网站题目​​​​二、✍️网站描述​​​​三、????网站介绍​​​​四、????网站演示​​​​五、???? 网站代码​​​​????HTML结构代码​​​​????CSS样式代码​​​​六、???? 如何让学习不再盲目​​​​七、????更多干货​​一、????‍????网站题目????个人网页设计、????‍♂️个人简历制作、????‍????简单静态HTML个人网页作品...
HTML+CSS网页制作成品：网站设计与实现——咖啡网站HTML+CSS+JavaScript
01-04 2754
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
【网页设计】期末大作业html+css (个人生活记录介绍网站）
qq_38512570的博客
03-27 252
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
【web前端期末大作业】HTML+CSS宠物狗静态网页设计
网页设计与制作 | HTML+CSS+JS
11-28 769
🐕 宠物网页设计 、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的
CSS网页设计详解：从基础到高级
CSS网页设计课件PPT深入解析了CSS在网页设计中的核心技术和应用。课程内容涵盖了多个章节，包括： 1. CSS概述： - CSS全称为层叠样式表（Cascading StyleSheet），它是一种用于描述HTML文档呈现方式的标记语言。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值