HTML+CSS基础知识(4)简单的广告界面

简介: 这篇文章通过代码示例演示了如何使用CSS样式来美化网页布局,包括清除默认样式、设置页面字体、调整标题和内容的样式,以及为超链接添加悬停效果。

文章目录

  • 1、网页实例
    • 1.1 代码
    • 1.2 测试效果

1、网页实例

1.1 代码

css样式

    /* 清除页面样式 */
    *{
        margin:0;
        padding: 0;
    }

    /* 统一页面的样式 */
    body{
        font:12px/1 宋体;
    }

    /* 设置outer大小 */
    .outer{
        width: 300px;
        /* height: 500px;
        background-color: #bfa; */
        margin:50px auto;
    }

    /* 设置title的样式 */
    .title{
        /* 设置上边框 */
        border-top:2px #019e8b solid;
        /* 设置盒子的高度 */
        height: 36px;
        /* 设置背景样式 */
        background-color: #f5f5f5;
        /* 设置title的行高*/
        line-height: 36px;
        /* 设置title的内边距 */
        padding: 0px 22px 0px 16px;
    }

    .title a{
        text-decoration: none;
        float: right;
        color: red;
    }

    .title h3{
        font:16px/36px "微软雅黑";
    }

      /* 设置内容 */
    .content{
        border:1px solid #deddd9;
        /* 设置内边距 */
        padding: 0px 28px 0px 20px;
    }

    .content h3{
        margin-top: 14px;
        margin-bottom: 16px;
    }

    /* 设置内容中的超链接 */
    .content a{
        color: black;
        /* 去除超链接下划线 */
        text-decoration: none;
        /* 设置字体大小 */
        font-size:12px

    }

    /* 为超链接添加一个hover伪类 */
    .content a:hover{
        color: red;
    }

    /* 设置右侧的a的样式 */
    .content .right{
        /* 设置向右浮动 */
        float: right;

    }

    /* 设置url的样式 */
   .content ul{
        /* 去除项目符号 */
        list-style: none;
        /* 为ul设置一个下边框 */
        border-bottom: 1px dashed #deddd9;

    }

    /* 取消最后一个ul的边框 */
    .content .no-border{
        border:none;

    }



     /* 设置li的样式 */
    .content li{
        margin-bottom: 15px;

    }

    .content .red{
        color: red;
    }

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>网页1</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
     <!-- 创建一个外层div,容纳整个内容 -->
    <div class="outer">

        <!-- 开班信息的头部 -->
        <div class="title">
            <a href="#">java练习营</a>
            <h3>近期开班</h3>



        </div>

        <!-- 开班信息的主要内容 -->
        <div class="content">
            <h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
            <ul>
                <li>
                    <a class="right" href="#"><span class="red">预约报名</span></a>
                    <a href="#">开班时间:<span class="red">2020-4-30</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span class="red">无座,名额饱满</span></a>
                    <a href="#">开班时间:<span class="red">2020-4-30</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间:<span>2020-4-30</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间:<span >2020-4-30</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间:<span>2020-4-30</span></a>
                </li>

            </ul>

                <h3><a href="#">Android+人工智能+全程就业班</a></h3>
                <ul>
                    <li>
                        <a class="right" href="#"><span class="red">预约报名</span></a>
                        <a href="#">开班时间:<span class="red">2020-4-30</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span >无座,名额饱满</span></a>
                        <a href="#">开班时间:<span >2020-4-30</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间:<span>2020-4-30</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间:<span>2020-4-30</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间:<span>2020-4-30</span></a>
                    </li>

                </ul>

                    <h3><a href="#">前端+HTML5-全程就业班</a></h3>
                    <ul class="no-border">

                        <li>
                            <a class="right" href="#"><span class="red">预约报名</span></a>
                            <a href="#">开班时间:<span class="red">2020-4-30</span></a>
                        </li>
                        <li>
                            <a class="right" href="#"><span>开班盛况</span></a>
                            <a href="#">开班时间:<span>2020-4-30</span></a>
                        </li>

                    </ul>
        </div>
    </div>

</body>

</html>

1.2 测试效果

不加css样式在这里插入图片描述

加css样式
在这里插入图片描述

相关文章
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
17天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
87 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
82 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
51 6
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
51 1
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
58 5
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
41 1
[HTML、CSS]知识点
|
3月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
2月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
90 12