html CSS相关练习

最新推荐文章于 2024-06-09 20:46:21 发布
最新推荐文章于 2024-06-09 20:46:21 发布
阅读量190 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/118699533
版权

CSS相关练习

1、css实现翻页样式

在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现翻页效果</title>
    <style type="text/css">
        .box{
            width: 960px;
            height: 42px;
            border: 1px solid black;
            margin: 50px auto 0px;
            padding: 0;
            font-size: 0;   /*去除掉间隙*/
            text-align: center;
        }
        .box .num{
            height: 5px;
            background-color: gold;
            margin-right: 10px;
            line-height: 8px;
            font-size: 12px;
            display: inline-block;  /*转换成内联块标签*/
            margin-top: 10px;
            padding: 10px;
            text-decoration: none;
            font-family: "Microsoft YaHei";

        }
        .box a:hover{
            background-color: red;
            color: white;
        }
        
    </style>

</head>
<body>
    <div class="box">
        <a href="https:\\www.baidu.com" class="num">上一页</a>
        <a href="#" class="num ch">1</a>
        <a href="#" class="num ch">2</a>
        <a href="#" class="num ch">3</a>
        <a href="#" class="num ch">4</a>
        <a href="#" class="num ch">5</a>
        <a href="#" class="num ch">6</a>
        <a href="#" class="num ch">7</a>
        <a href="#" class="num ch">8</a>
        <a href="#" class="num ch">9</a>
        <a href="#" class="num ch">10</a>

        <a href="#" class="num ch">20</a>
        <a href="#" class="num">下一页</a>
    </div>

</body>
</html>

实现效果如下所示：
在这里插入图片描述

效果改善：（使用ul-li列表方式实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现翻页样式改善</title>
    <style type="text/css">
        .box{
            list-style: none;
            width: 600px;
            height: 40px;
            border: 1px solid black;
            margin: 50px auto 0;
            text-align: center;
            font-size: 0;
            padding: 0; /*去除掉li默认的样式*/
        }
        .box li{
            /*height: 25px;*/
            display: inline-block;  /*如果子元素是内联块，则其父元素可以使用text-align实现居中操作*/

            height: 26px;
            font-size: 12px;
            margin:7px 5px 0;
        }

        /*将a元素转换成块元素*/
        .box li a{
            display: block;
            background-color: gold;
            height: 26px;
            line-height: 26px;
            padding:0px  10px;
            text-decoration: none;
            font-size: 12px;
            font-family: "Microsoft Yahei";
            color: black;
        }

        .box li a:hover{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
<ul class="box">
    <li><a href="#">上一页</a></li>
    <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><span>...</span></li>
    <li><a href="#">17</a></li>
    <li><a href="#">18</a></li>
    <li><a href="#">19</a></li>
    <li><a href="#">20</a></li>
    <li><a href="#">下一页</a></li>
</ul>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

2、导航栏：导航条01（盒模型、行内元素布局）

在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条的样式设置</title>
    <style type="text/css">
        .box{
            width:960px ;
            height:40px ;
            list-style: none;
            border: 1px solid black;
            position: fixed;
            left: 50%;
            top:0%;
            margin: 0 -480px 0;
            text-align: center;
            font-size: 0;   /*去除间隙*/

        }
        .box li{
            display: inline-block;  /*将块元素转化为行内块元素*/
            /*background-color: pink;*/
            font-size: 16px;
            height: 40px;
        }
        .box li a{
            display: block; /*将行内元素转为块元素*/
            margin: 10px 10px 0;
            text-decoration: none;
            padding: 0 10px 0;
            color: black;
            font-family: "Microsoft Yahei";
        }
        .box li a:hover{
            background-color: goldenrod;
            color: white;
            font-weight: bolder;
        }
        .box1{
            width: 600px;
            height: 600px;
            margin: 60px auto 0;
            background-color: pink;
        }


    </style>
</head>
<body>

    <ul class="box">
        <li class="info"><a href="#">首页</a></li>
        <li class="info"><span>|</span></li>
        <li class="info"><a href="#">网站建设</a></li>
        <li class="info"><span>|</span></li>
        <li class="info"><a href="#">程序开发</a></li>
        <li class="info"><span>|</span></li>
        <li class="info"><a href="#">企业VI</a></li>
        <li class="info"><span>|</span></li>
        <li class="info"><a href="#">案例演示</a></li>
        <li class="info"><span>|</span></li>
        <li class="info"><a href="#">联系我们</a></li>

    </ul>

    <div class="box1">
        haha
    </div>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

3、导航栏：导航条02所需知识点：盒模型、浮动、定位、字体对齐）

在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条的样式2</title>
    <style type="text/css">
        .box{
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
            position: fixed;
            padding: 0;
            list-style: none;
            font-size: 0;

            left: 50%;
            margin: 0 -480px 0;
            text-align: center;
            font-size: 0;
        }
        .box li{
            display: inline-block;
            font-size: 16px;
            float: left;
            /*background-color: pink;*/
            /*margin-right: 10px;*/
            height: 40px;
            /*border: 1px solid black;*/
            position: relative;

        }
        .box li a{
            display: block;
            height: 40px;
            width: 100px;
            text-align: center;     /*设置字体居中*/
            font-family: "Microsoft Yahei";
            color: black;
            text-decoration: none;
            line-height: 40px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            font-size: 14px;
        }

        .box li a:hover{
            background-color:#00619f;

        }
        .hot{
            width: 33px;
            height: 20px;
            /*font-size: 1px;*/
            background-image: url("images/new.png" );   /*背景图片*/
            background-repeat: no-repeat;
            /*background-color: orangered;*/
            /*border: 1px solid black;*/
            text-align: center;
            position: absolute;
            top: -5px;
            right: 30px;
            border-radius: 5px;

            display: block;/*控制是否显示*/
        }

    </style>
</head>
<body>
    <ul class="box">
        <li class="info">
            <div class="hot show"></div>
            <a href="#">首页</a>
        </li>
        <li class="info">
            <a href="#">网站建设</a>
        </li>
        <li class="info">
            <a href="#">程序开发</a>
        </li>
        <li class="info">
            <a href="#">网络管理</a>
        </li>
        <li class="info">
            <a href="#">企业VI</a>
        </li>
        <li class="info">
            <a href="#">案例展示</a>
        </li>
        <li class="info">
            <a href="#">联系我们</a>
        </li>
    </ul>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

4、特征布局：图片列表（所需知识点：盒模型、浮动）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS练习3_图片列表</title>
    <style type="text/css">
        .box{
            width: 958px;
            height: 269px;
            border: 1px solid black;
            /*padding-right: 20px;*/
            /*padding-left: 20px;*/

        }
        .box .box1 h2{
            float: left;
            margin: 0;
            width: 918px;
            height: 50px;
            font-size: 18px;
            font-family: "Microsoft Yahei";
            color: #000;
            line-height: 48px;
            /*background-color: pink;*/
            text-indent: 20px;
            margin-right: 20px;
            border-bottom: 1px solid black;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .pic{
            width: 918px;
            overflow: hidden;       /*非常关键，其裁切掉超出的宽度*/
            /*background-color: red;*/
            margin: 20px auto 13px;
        }
        .box2 {
            /*border: 1px solid red;*/
            /*background-color: cyan;*/
            /*padding-left: 20px;*/
            overflow: auto; /*放置引发元素溢出问题*/
            width: 1000px;
            /*margin-left: 20px;*/


        }
        .box2 a{
            /*margin-left: 20px;*/
            height: 68px;
            width: 160px;
            display: block;
            float: left;
            margin-right: 29px;
            margin-bottom: 25px;
        }


    </style>
</head>
<body>
    <div class="box">
        <div class="box1"><h2>图片展示</h2></div>
        <div class="pic">
            <div class="box2">
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
                <a href=""><img src="images/goods.jpg" alt=""></a>
        </div>
        </div>
    </div>

</body>
</html>

效果显示如下：
在这里插入图片描述

郭庆汝
关注
HTML CSS学习练习.zip
12-30
HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML...
html+css布局综合练习
借风拥你
03-18 1230
一、准备工作 1.引入reset.css 主要是消除一些默认的样式 /* 基础设置 */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{ margin: 0; padding: 0; } ul,ol { list-style: none; } img { /* 底部留白 */ display:
html+css网页练习一
qq_52108058的博客
02-02 7554
阅读下列说明、效果图和HTML代码，进行静态网页开发。 这个某项目中的其中一个活动页，应用html和css技术完成页面的布局。项目包含主页index.html、style.css，css和img文件夹分析： 4、style.css 二、改革进展与成效管理平台页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发。 项目名称为“改革进展与成效管理平台”，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含normalize.css文件；img文件夹包含用到的图片。大
HTML核心+CSS基础（练习）
2301_80441013的博客
11-19 331
学习语言练习是必不可少，重中之重的，这一周我进行了常规流，浮动，定位以及表单元素的练习下面就让我们一起看看这周的分享吧！
html+css综合练习一
qq_52108058的博客
02-13 1407
阅读下列说明、效果图，进行静态网页开发。 某网站注册页面开发项目，点击立即注册，进入第二个页面。项目名称为xiaomi，包含首页index.html、css文件夹，其中，css文件夹包含style.css文件。分析： 3.2、style.css 二、下午茶页面 1、要求 阅读下列说明、效果图，进行静态网页开发。 项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示 4、style.css 三、法国巴黎页面 1、要求 阅读下列说明、效果图，进行静态网页开发。 项目包含首页inde
HTML+CSS基础题
weixin_46132649的博客
12-09 2660
HTML+CSS基础题
html+css练习案例
最新发布
07-21
html+css练习案例
html+css定位练习
08-05
在HTML和CSS的学习过程中，定位（Positioning）是至关重要的一个环节，它允许开发者精确地控制元素在网页上的布局。本练习集旨在帮助初学者掌握这一核心概念，特别是对定位理解不清晰的同学，通过实践可以更好地理解...
html css 练习素材
01-02
3. 结构与样式关联：练习可能包括了如何通过`<link>`标签将CSS文件链接到HTML文件，或者如何在HTML文件中使用`<style>`标签内联样式，以此理解HTML和CSS之间的关联。 4. 响应式设计：可能包含有关如何使用媒体查询...
学习html和css的练习.zip
01-05
学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html...
HTML+CSS练习项目
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
04-13 278
【代码】HTML+CSS练习项目。
HTML+CSS练习案例
weixin_53519274的博客
12-21 1011
这个小案例是我大一刚学前端的html+css的练习小案例，虽然简单，但是对于当时小白的自己，也是给了我很大的成就感的哈哈哈哈，现在记录一下（找了好久才找到的，呜呜呜）提示：以下是本篇文章正文内容，下面案例可供参考这个小案例是大一暑假学习练习的，时间已经很久了，适合小白练习。
HTML+CSS练习
m0_61665967的博客
12-24 68
【代码】HTML+CSS练习。
HTML-CSS练习例子
pacong的博客
06-09 1737
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
热门推荐
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
html+css练手项目3
呼啦啦啦啦啦的博客
07-13 2058
简单的综合考察的html+css的练手项目
【HTML/CSS篇】牛客题库练习
weixin_50927106的博客
08-28 2755
< dl > < dt > nowcoder < dd > nowcoder < dt > nowcoder < dd > nowcoder < dt > nowcoder < dd > nowcoder
h5+css
shutingB的博客
06-29 679
CSS样式 课程目标 1.css引入方式（重点） 2.css选择器（重点） 3.css盒子模型（重点） 4.css3常见效果（重点） 1. 级联样式表 1.1 css介绍 引用百度百科 1.2 css概述 层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式） 2. css引入方式 2.1 行内样式 行内样式（将样式直接写在标签上），需要使用style属性 <p style="colo
html+css网页练习三
qq_52108058的博客
02-05 2695
另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；（2）【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。
纯html css的练习项目
09-17
纯HTML和CSS的练习项目可以是创建一个静态网页或网站，并使用HTML和CSS来设计界面和布局。下面是一个简单的例子： 首先，你可以创建一个简单的网页布局，包括一个顶部导航栏、一个侧边栏和一个主要内容区域。你可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值