HTML与CSS实战

最新推荐文章于 2024-05-18 12:54:30 发布
最新推荐文章于 2024-05-18 12:54:30 发布
阅读量6.6k 收藏 24
点赞数 1
分类专栏： Head First HTML and CSS总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiebin6163/article/details/79056941
版权

看完了《Head first HTML and CSS》总觉的要做点东西才算学完，就看了十八哥的实战视频简单地模仿了一个网站。做个总结。

实战结果

这里写图片描述

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>谢斌实战</title>
    <link rel="stylesheet" type="text/css" href="image/reset.css">
    <link rel="stylesheet" type="text/css" href="image/header.css">
    <style type="text/css">

    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            <img src="image/logo.jpg" alt="" id="logo">
            <ul id="nav">
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
                <li><a href="#">导航4</a></li>
                <li><a href="#">导航5</a></li>
                <li><a href="#">导航6</a></li>
                <li><a href="#">导航7</a></li>
            </ul>                       
        </div>
        <img src="image/about_banner.jpg" id="banner">
        <div id="main">
            <div id="lside">
                <div class="subtitle">
                    <img src="image/circle.gif" alt="triangle">
                    <h1>核心业务</h1>
                    <a href="#">MORE</a>
                </div>
                <div class="four">
                    <h2>电子商户类网站建设</h2>
                    <img src="image/eshop_service.jpg">
                    <ul>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                        </ul>   
                </div>
                <div class="four">
                    <h2>电子商户类网站建设</h2>
                    <img src="image/eshop_service.jpg">
                    <ul>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                        </ul>   
                </div>
                <div class="four">
                    <h2>电子商户类网站建设</h2>
                    <img src="image/eshop_service.jpg">
                    <ul>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                        </ul>   
                </div>
                <div class="four">
                    <h2>电子商户类网站建设</h2>
                    <img src="image/eshop_service.jpg">
                    <ul>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                            <li><a href="#">方便的图片管理</a></li>
                        </ul>   
                </div>
            </div>
            <div id="rside">
                <div class="subtitle">
                    <img src="image/circle.gif" alt="triangle">
                    <h1>文章观点</h1>
                    <a href="#">MORE</a>
                </div>
                <ul id="art">
                    <li><a href="#">这是一篇好文章1</a></li>
                    <li><a href="#">这是一篇好文章2</a></li>
                    <li><a href="#">这是一篇好文章3</a></li>
                    <li><a href="#">这是一篇好文章4</a></li>
                    <li><a href="#">这是一篇好文章5</a></li>
                </ul>
                <div class="subtitle">
                    <img src="image/circle.gif" alt="triangle">
                    <h1>联系我们</h1>
                    <a href="#">MORE</a>
                </div>
                <div id="contact"></div>
            </div>
            <div class="clr"></div>
        </div>
        <div id="footer">
            <ul>
                <li><a href="#">联系我们1</a></li>
                <li><a href="#">联系我们2</a></li>
                <li><a href="#">联系我们3</a></li>
                <li><a href="#">联系我们4</a></li>
                <li><a href="#">联系我们5</a></li>
                <li><a href="#">联系我们6</a></li>
                <li><a href="#">联系我们7</a></li>
            </ul>
            <address>&copy:2006-2018 福建福州市国通星驿科技网络有限公司 copyright http://www.xiebin.com</address>
        </div>
    </div>
</body>
</html>

个人认为这里有些DIV可以用这篇博客里面讲到的元素代替

CSS代码


        .clr {
            clear:both;
            width:0px;
            height: 0px;
        }
        #container{
            margin:0 auto;
            width:1002px;
        }
        #header{
            height:128px;
            background: gray url(top_bg.jpg);
            background-repeat:no-repeat;
    }
        #nav li {
            width:90px;
            margin-right: 1px;
            float:left;
        }
        #nav a {
            font-size:16px;
            line-height: 37px;
            font-family:'微软雅黑';
            color:#363636;
            display:block;
            width:90px;
            height:37px;
            text-align:center;
        }
        #nav a:hover{
            color:white;
            background: url(nav_on.gif); 
        }
        #banner{
            margin: 6px 0;
        }
        #main{

        }
        #lside{
            height:482px;
            width:694px;
            border: 1px solid #EEE;
            border-top:none;
            /*background:blue;*/
            float:left;
        }
        .subtitle{
            height:37px;
            background:gray url(index_main_top_bg.gif);
        }
        .subtitle img{
            margin:5px 0px 0px 10px;
            float: left;
        }
        .subtitle h1{
            float:left;
            margin-left:10px;
            font-size:16px;
            line-height: 37px;
            font-family:'Microsoft Yahei',SimHei;
        }
        .subtitle a{
            font-size:12px;
            line-height: 37px;
            color:gray;
            float:right;
        }
        .four{
            width:326px;
            height:200px;
            background:#EEEEEE;
            margin:10px;
            float:left;
        }
        .four img{
            float:left;
            margin-left:10px;
            padding:6px;
            background:white;
        }
        .four ul{
            float:left;
            margin-left:10px;
        }
        .four li{
            background: url(service_intro_bg.gif) no-repeat;
            padding-left:10px;
            height:20px;
        }
        .four a{
            color:gray;
        }
        .four a:visited{
            color:gray;
        }
        .four a:hover{
            color:orange;
        }
        .four h2{
            margin:6px 0px 6px 10px;
            font-size:16px;
            font-family:'Microsoft Yahei',SimHei;
        }
        #rside{
            height:482px;
            width:294px;
            float:right;
        }
        #art{
            background:#EEE;
            margin-top:1px;
            padding-top:10px;
        }

        #art a{
            display: block;
            line-height: 29px;
            height:29px;
            /*padding-top:5px;*/
            padding-left: 30px;
            background: url(article_head.gif) no-repeat;
        }
        #art a:hover{
            background: url(article_on_bg.gif);
        }
        #contact {
            height:227px;
            background: #EEE;
            margin-top:1px;
        }
        #footer{
            height:120px;
            margin-top:15px
        }
        #footer ul{
            height:40px;
            padding-top:15px;
            background:#EEE;
        }
        #footer li{
            float:left;
            padding-right:20px;
        }
        #footer address{
            font-family:'微软雅黑',sans-serif;
        }

雅虎工程师CSS初始化代码


/*css reset code */

/****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:10px;
} /* for everything else */

/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img {
 border: 0;
 }
 img {
 display:block;
 }
address,caption,cite,code,dfn,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }

a {
text-decoration:none;
}

网页图片

搜8小时完成HTML网页开发

三分之一给你
关注
  • 1
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+Javascript+Css实战题
06-08
这组“HTML+Javascript+Css实战题”旨在帮助你深入理解和应用这些技术。 首先，HTML是网页的基础。它通过一系列标签来组织内容，如`<html>`、`<head>`、`<body>`、`<h1>`、`<p>`等。在实战题中，你可能会遇到如何...
HTML+CSS项目实战
m0_48069349的博客
08-14 1086
这里实战的网站是小米商城。首先是项目的搭建 引入favicon和css，这个commoncss就是一个公共的css。成为一个合格的页面重构师所有的公共样式书写到 中 这里的list-style: none;就是可以清除小点。a元素里面的color: inherit;这个是在之前的属性计算里面讲过 通用容器 这个是小米商城上有很多都符合这个特征。这部分属于CSS3的知识，现阶段只需要知道如何使用即可在页面所有样式之前引入一个CSShttps://at.alicdn.com/t/font_2960521_r
HTML与CSS详细介绍
热门推荐
weixin_44454512的博客
11-28 1万+
HTML 与 CSS 1. 主要内容 2. HTML HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。 它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。 HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件
【Web前端入门】HTML+CSS 万字总结——带你深入学习掌握
最新发布
网页设计与制作 | HTML+CSS+JS
05-18 709
现在对HTML和CSS的基础知识做一个详细的总结，文章内容很硬核。共有3w+字总结，建议收藏反复学习！适用于初学者学习或者熟练相关操作的人复习使用。 文章目录 HTML篇 一.HTML简介 1.什么是HTML？ 2.HTML 标签 3.HTML 元素 4.HTML版本 5.Web 浏览器 6.HTML 网页结构 7.中文编码 8.编写第一个网页 二.HTML编辑器 三.HTML基础 1.HTML 标题 2.HTML 段落 3.HTML 链接 4.HTML 图像 四.HTML元素 1.
HTML和CSS实战项目
天天学安全专属博客
07-07 1145
HTMl和CSS学后必做项目
css 样式实战
ws - 兮的博客空间
12-06 925
使用filter 滤镜可对图标进行任意变色。示例1：在当前父元素下把按钮定位到右边。参数： 展示隐藏动画时间，默认无动画。父元素使用 relative 定位。子元素使用 absolute 定位。图标使用 relative 定位。内容使用 absolute 定位。文本超出显示省略号 …2-图标展开隐藏切换。
第四章 CSS+HTML 项目实战
www
03-28 765
如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。Favicon是favorites icon的缩写，亦被称为website icon（站点图标）、page icon（页面图标）；如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。
实战HTML5与CSS3中篇
03-01
所以就早点起来进行，否则这个进度有点吃紧啊，昨天初略的完成了导航以及爆炸的图片，这里来回顾下：1导航为一个div背景跟着导航栏目移动，并有一定抖动感觉，这个完全是jquery的东西了，若是用css3我暂时没有想到...
html+css入门到实战源码
12-09
HTML和CSS是构建网页设计的基础，是前端...通过这个"html+css入门到实战源码"的学习资源，你将能够逐步掌握前端开发的基础，为未来的网页设计和开发工作打下坚实的基础。不断实践，勇于探索，你将在前端领域走得更远。
HTML+CSS实战开发
07-01
也许你只会html和css基础理论知识，缺少实战，这是计算机技术学习的大忌，本课程按照企业开发的流程规范进行授课让你迈向实战开发第一步，学完课程后，你将对基础知识进一步巩固与加强，同时提升自己运用知识和实战...
css实战与技巧
m0_72979912的博客
11-15 541
css实战与技巧 接 css基础教程
HTML+CSS炫酷效果（小伙伴赶紧收藏起来吧）
qq_64608499的博客
05-27 4394
兄弟们,下午好,想了很久,不知道写点什么,就写点通知的吧, 效果图： HTML如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.
HTML+CSS学习
m0_56709616的博客
02-20 944
学习笔记
HTML+css实现的效果
Start2019
02-21 703
鼠标划过的效果、锚点、css精灵的应用、后台管理布局、css3实现的效果
HTML+CSS入门学习
Dawn_Dusk_的博客
01-09 1878
HTML+CSS入门学习
CSS快速入门及简单实战
m0_73770225的博客
12-06 349
css语法结构，样式类型，选择器及盒子模型
CSS实战栗子
weixin_52629592的博客
06-20 210
运行结果如下: 运行结果如下: 运行结果如下:
HTML+CSS项目案例
qq_52108058的博客
11-30 3541
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML与CSS
悟兰因的博客
01-27 748
HTML5+CSS3
HTML5与CSS3实战：打造精美网站
"实战HTML5与CSS3上篇" 在本实战教程中，我们将专注于使用HTML5和CSS3技术来创建一个类似"www.zhinengshe.com/index.html"的网站，以此来提升我们的前端开发技能。这个网站展示了HTML5和CSS3的一些高级特性，包括...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值