HTML/CSS基础知识实战

最新推荐文章于 2022-11-30 19:42:26 发布
最新推荐文章于 2022-11-30 19:42:26 发布
阅读量350 收藏 5
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwx617/article/details/79127761
版权

前一段时间学了HTML和CSS的知识，今天有时间赶紧将学到的知识综合起来写个好看的界面。整体
界面效果如下：
这里写图片描述
这里写图片描述
这里写图片描述
整体分为头部、中部、底部，需要使用到例如浮动、浮动的清除、遮罩层、水平垂直居中等基础知识。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <!--头部-->
        <div class="header">
            <div class="logo">
                <img src="image/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="image/1.jpeg"/>
            </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="image/weibo.png"/>
                        <div class="comm">Microblog</div>
                    </div>
                    <div class="commen weixin">
                        <img src="image/weixin.png"/>
                        <div class="comm">Wechat</div>
                    </div>
                    <div class="commen qq">
                        <img src="image/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="image/03-01.jpg">
                        <div class="m-com-word">Cool Image</div>
                        <div class="m-com-word">Record The Picture</div>
                    </div>
                    <div class="m-com">
                        <img src="image/03-02.jpg">
                        <div class="m-com-word">Great Picture</div>
                        <div class="m-com-word">Record The Picture</div>
                    </div>
                    <div class="m-com">
                        <img src="image/03-03.jpg">
                        <div class="m-com-word">Cool Image</div>
                        <div class="m-com-word">Record The Picture</div>
                    </div>
                    <div class="clear"></div><!--清除浮动-->
                </div>
            </div>
            <div class="bottom">
                <div class="content">
                    <div class="title">FROM THE PHOTO ALBUM</div>
                    <div class="pic-content">
                        <!--图文混排固定使用标签 dt是图片 dd是文字描述-->
                        <dl>
                            <dt><img src="image/04-01.jpg"/></dt>
                            <dd class="word">Life is like a book, just read more and more
                                refined, more write more carefully. When read,
                                mind open, all things have been indifferent to
                                heart. Life is the precipitation.</dd>
                        </dl>
                        <dl>
                            <dt><img src="image/04-02.jpg"/></dt>
                            <dd class="word">Life is like a cup of tea, let people lead a
                                person to endless aftertastes. You again good
                                taste, it will always have a different taste,
                                different people will have different taste more.</dd>
                        </dl>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <div class="footer">
            © 2016 imooc.com 京ICP备13046642号
        </div>
    </body>
</html>

css文件

*{
    padding: 0;
    margin: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 {
 margin-right: 100px;
}
.header .nav ul li{
    float: left;
    list-style: 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: 0;
    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-family: "微软雅黑";
    text-align: center;
    font-weight: bolder;
    font-size: 14px;
    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: bold;
    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;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
 }
.main .middle .m-bottom .m-com img {
    width:310px;
    height: 260px;
}
.main .middle .m-bottom .des1{
    color:#7D7D7F;
    padding-top: 20px;
}
.main .middle .m-bottom .des2 {
    padding-top: 10px;
    color: #BDBDBC;
}
.main .bottom {
    background-color: #F9F9F9;
}
.main .bottom .content {
    width:1000px ;
    margin: 0 auto;
}
.main .bottom .content .titile{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #7D7C7F;
    font-family: "微软雅黑";
    padding-top:50px;
    padding-bottom: 50px;
}
.main .bottom .content .pic-content dl {
    float: left;
    width:470px;
    margin: 10px 12px;
}
.main .bottom .content .pic-content dl img {
    width:470px;
    height: 460px;

}
.main .bottom .content .pic-content dl .word {
    padding-top:20px;
    font-size: 20px;
    font-weight: bold;
    color:#7D7C7F;
    padding-bottom: 50px;
}
.footer{
    width: 100%;
    height: 100px;
    background-color: #292C35;
    color: #ffffff;
    text-align: center;
    line-height: 100px;
    font-family: "微软雅黑";
    font-size: 15px;
}
WindFromFarEast
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 弹出框显示到最顶层,layer弹出层显示在top顶层的方法
weixin_35880510的博客
06-10 5928
layer弹出层显示在top顶层的方法因为项目框架用了iframe，所以在用layer时，默认layer.open弹出的窗口只能在iframe子窗口区域显示。现在想让layer在父窗口或者说框架的最顶层显示，想到用top.layer.open或者parent.layer.open,但是没反应。后面想到应该是在父页面中没有导入layer.js文件，导入后就能正常显示在父窗口页面区域了。显示在顶层窗口...
HTMLCSS基础知识
weixin_46602653的博客
06-20 116
继承 子元素可以继承父元素的样式 text font line 这些元素开头的 以及color 行高可以跟单位可以不跟单位 例如20px 例如 1.5这个1.5是当前元素文字大小的1.5背border-collapse：collapse； 合并相邻边框行内元素和行内块元素水平居中 给父亲添加text-align：center即可 块级 margin 0 auto解决嵌套元素垂直外边距塌陷 为父元素定义上边框 为父元素定义上内边距 为父元素添加overflow：hieend行内元素为了照顾兼容性，尽
top.layer弹出层
weixin_44541467的博客
07-17 8804
在开发中经常会用到页面嵌套，但嵌套子页面中的layer弹出层只在子页面显示的话会有些不美观。 这时候将layer弹出层放到顶层，就会协调很多。 这点layui就做的非常好，方法简约而又不失内涵。 Layer与top顶层窗口非常契合，只需在要打开的layer弹出层前面加上top就可将其弹出在顶层页面。 一般的提示框都没什么，但若要用layer来实现模态框效果就需要注...
HTML+CSS项目案例
qq_52108058的博客
11-30 3532
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML+CSS实战入门这篇就够了(五)
个人笔记
04-18 1万+
CSS+HTML前言CSSHTML实战CSS+DIV布局（HTML内容可自行补充） 前言 大家好， 为了入门几能完成一个HTML+CSS的一个网页，所以我把CSS放在HTML的前面讲。因为一个网页的布局是起始关键是相当重要的，只有清楚的知道如何布置好的你网页框架，才能完成HTML内容的编写的清晰，否则便无从下手，或导致一个界面混乱的网页被你制作出来。下面让我们开始吧。 CSS 1.CSS 指层叠样...
html+css实战3-了解-初识-浏览器
geyaoisnice的博客
05-31 44
HTML、CSS基础知识笔记
木木木森林
11-26 995
构造函数在es6之前是没有“类”的概念的。 格式化VS CODE 文档：shift + alt +f css hover 如果给a元素，那么只有在a里面的才能被选取，如果给外面的元素像div，ul li 这样就是在元素外部也能被选取。 行内元素不支持直接设置宽、高。 不换行，溢出的字以省略号表示： width：多少px自己决定; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 注：ellipsis : 　当对象内文本溢出
html+css入门到实战源码
12-09
HTML和CSS是构建网页设计的基础，是前端...通过这个"html+css入门到实战源码"的学习资源，你将能够逐步掌握前端开发的基础，为未来的网页设计和开发工作打下坚实的基础。不断实践，勇于探索，你将在前端领域走得更远。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
最新发布
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
html+css-实战电商品优购网页制作_源码.zip
03-12
在本实践项目中，我们将深入学习HTML和CSS的基础知识，并通过构建一个名为“电商品优购”的电商网页来提升技能。这个压缩包包含了实现这一目标的所有必要资源，包括源码文件、样式表以及项目规划图。 首先，HTML...
HTML+CSS实战开发
07-01
也许你只会html和css基础理论知识，缺少实战，这是计算机技术学习的大忌，本课程按照企业开发的流程规范进行授课让你迈向实战开发第一步，学完课程后，你将对基础知识进一步巩固与加强，同时提升自己运用知识和实战...
html5+css3实战 例子
03-03
HTML5和CSS3是现代网页开发的两大核心技术，它们的结合使用极大地提升了Web设计的...通过阅读这本书，开发者不仅可以了解HTML5和CSS3的基础知识，还能学习到如何在项目中有效应用这些新技术，从而提升自己的专业素养。
HTML+CSS小实战案例
Biexiansheng的博客
04-19 1万+
HTML+CSS小实战案例 登录界面的美化，综合最近所学进行练习 网页设计先布局，搭建好大框架，然后进行填充，完成页面布局 1 html> 2 head> 3 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 title>实验title> 5 style type=
HTML+CSS 基础实战演练
qq_38096598的博客
09-21 473
HTML+CSS 基础实战演练 页面展示 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="test1.css" /> <title>实战</titl...
HTML/CSS/JS实现二级菜单导航+轮播图
热门推荐
轻风起自远东
02-05 1万+
学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下： 首先来说说这个项目中用的比较多的知识点： CSS定位——绝对定位和相对定位的搭配使用，用的非常多 JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能 div块标签 首先是整个页面
IntelliJ IDEA JSP文件不提示内置对象的解决方案
轻风起自远东
02-07 2320
出现这个问题的原因是没有添加Apache Tomcat的lib依赖 解决方法 打开project structure->Libraries 点击加号->找到apche tomcat文件夹下的lib目录，添加进来即可。
CSS基础知识（三）——浮动float
轻风起自远东
01-17 562
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 float属性一共有四个参数：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承父元素的浮动属性） html lang="en"> head> meta charset="UTF-8">
IntelliJ IDEA创建Web项目的步骤
轻风起自远东
02-06 527
第一步： 第二步： 第三步： 第四步：配置运行时环境——Tomcat服务器 第五步： 第六步： 第七步：按下OK后，可以在右上角看到MyTomcat运行时环境已经配置成功 第八步：参照我的上一篇博客进行WEB-INF文件夹的配置 第九步：配置成功后，按下右上角绿色的三角形运行按钮运行Web项目 IntelliJ IDEA自动帮我们打开了Chrome
JSP基础知识
轻风起自远东
02-08 443
一、什么是JSP 二、Eclipse下动态Web项目的结构 三、JSP程序的执行过程 用户首先向服务器发起访问jsp文件的请求，web容器读取jsp文件后，生成对应的java文件（准确的说是Servlet源文件），web容器再将java文件编译成class文件，最后由web容器加载编译后的class文件并执行，把执行结果相应给客户端。 四、JSP基本语法 1、声明语法...
Web应用设计实践（HTML/JavaScript/CSS）：班级网页-doc文档
01-19
在掌握了基础知识后，课程设计进一步扩展到高级层次，学生应能运用JavaScript和CSS制作更为复杂的页面特效，不仅要能理解其工作原理，还要能够灵活运用这些技术来增强用户体验。此外，学生还需学会网站的管理与维护...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值