HTMLcss练习题1

已于 2022-01-26 10:50:27 修改
阅读量360 收藏
点赞数
文章标签： 前端 css html
于 2021-04-27 10:31:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ATCG7/article/details/116193627
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div{
            width: 500px;
            margin: 20px auto;
            border: 3px solid #ccc;
           
        }
        ul{
            width: 420px;
            margin: 20px 20px;
            border: 1px solid #ccc;
            padding: 20px;
        }
        li{
            border-bottom:1px solid gray;
            line-height: 30px;
            color: #122e67;
            list-style-image: url(./disc.jpg);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>111111111</li>
            <li>111111111</li>
            <li>111111111</li>
            <li>111111111</li>
            <li>111111111</li>
            <li>111111111</li>
        </ul>
    </div>
</body>
</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        .main{
            width: 1210px;
            margin: 10px auto;
            background-color: #ccc;
            border: 3px solid #ccc;
        }
        ul{
            padding:0px;
            margin: 2px auto;
            width: 1200px;
            
        }
        li{
            display: inline-block;
            width: 216px;
            height: 200px;
            list-style: none;
            padding-left: 20px;
            padding-top: 20px;
            margin: 2px auto;
            background-color: #fff;
        }
        img{
            width: 154px;
            margin-left: 60px;
        }
        .one{
            font-size: 18px;
            color: #000;
        }
        .two{
            font-size: 14px;
            color: #64c333;
        }
    </style>
</head>
<body>
    <div class="main">
        <ul>
            <li>
                <span class="one">抱抱果新首发</span>
                <br>
                <span class="two">抱一下就幸福</span>
                <img src="./1.jpg" alt="">
            </li>
            <li>
                <span class="one">天猫冰箱节</span>
                <br>
                <span class="two">智由随风</span>
                <img src="./2.jpg" alt="">
            </li>
            <li>
                <span class="one">西门子全球精选</span>
                <br>
                <span class="two">旗舰精品享你所想</span>
                <img src="./3.jpg" alt="">
            </li>
            <li>
                <span class="one">进口葡萄酒专场</span>
                <br>
                <span class="two">原瓶进口品质保证</span>
                <img src="./4.1.jpg" alt="">
            </li>
            <li>
                <span class="one">手机专场</span>
                <br>
                <span class="two">原装正品</span>
                <img src="./5.1.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 700px;
            margin: 10px auto;
        }
        .one{
            width: 250px;
            height: 320px;
            margin: 10px 10px ;
            padding: 10px;
            border: 1px solid #ccc;
            font-size: 12px;
            color: #66667f;
            line-height: 25px;
        }
        .first{
            font-size: 14px;
            color: #666;
            line-height: 32px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        li{
            list-style: none;
        }
        .yuan{
            color: #ff5587;
        }
        .red{
            color: red;
        }
        .img{
            width: 250px;
            height: 188px;
        }
    </style>
</head>
<body>
    <div class="main">
        <ul>
            <div class="one">
                <img class="img" src="./pic1.jpg" alt="">
                
                <li class="first">动画便利店X果壳网《西门子洗碗机囧囧》</li>
                <li><b class="yuan">原创作品</b>-影视-Motion Graphic</li>
                <li>2小时前上传</li>
                <li>
                    <span class="red">1284</span>  人气/<span class="red">11</span>  评论/<span class="red">47</span>  推荐
                    
                </li>
                <li>
                    <img src="./play.png" alt="">
                </li>
            </div>
            <div class="one">
                <img class="img" src="./pic2.gif" alt="">
                <li class="first">动画便利店X视知《到底工资怎么发才够》</li>
                <li><b class="yuan">原创作品</b>-影视-Motion Graphic</li>
                <li>3小时前上传</li>
                <li>
                    <span class="red">1569</span>  人气/<span class="red">50</span>  评论/<span class="red">125</span>  推荐
                    
                </li>
                <li>
                    <img src="./play.png" alt="">
                </li>
            </div>
        </ul>
    </div>
</body>
</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            line-height: 50px;
        }
        img{
            margin: 10px auto;
            float: left;
            margin-right: 20px;
        }
        .main{
            width: 840px;
            margin: 10px auto;
        }
        .list:hover{
            background-color: #f8f8f8;
        }
        .list{
            border-top: 2px solid #ccc;
            height: 230px;
        }
        .first{
            font-size: 20px;
            font-family: 黑体;

        }
        .yellow{
            color: #cccc00;
            font-size: 16px;

        }
        .lag{
            background-color: #eee;
            color: #999;
            font-size: 14px;
        }
        .radius{
            border: 1px solid #eee;
            border-radius: 25px;
        }
        ul{
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="main">
        
            <div class="list">
                <img src="./4.jpg" alt="">
                <ul>
                <li class="first">不只有看肤色挑唇色 选对口红衣服更美</li>
                <li><span class="yellow">标签</span> <span class="lag">唇膏</span> <span class="lag">衣服</span> <span class="lag">粉色</span> <span class="lag">化妆</span> <span class="lag">美容美体</span></li>
                <li><span class="radius">悦己self</span> 2016-10-18</li>
            </ul>
            </div>
            <div class="list">
           
                <img src="./5.jpg" alt="">
                <ul>
                <li class="first">雪花红唇妆 让你的女王范分分钟秒杀路人</li>
                <li><span class="yellow">标签</span> <span class="lag">唇膏</span> <span class="lag">衣服</span> <span class="lag">粉色</span> <span class="lag">化妆</span> <span class="lag">美容美体</span></li>
                <li><span class="radius">毛戈平形象艺术学校</span> 2016-10-18</li>
            </ul>
            </div>
            <div class="list">
                
                <img src="./6.jpg" alt="">
                <ul>
                <li class="first">无数次给国外博主跪了把自己的脸画成漫画人物好逼真</li>
                <li><span class="yellow">标签</span> <span class="lag">美容美体</span></li>
                <li><span class="radius">八公举</span> 2016-10-18</li>
            </ul>
            </div>
        
    </div>
</body>
</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 100%;
            height: 50px;
            background-color: dimgray;
            color: #fff;
            font-size: 20px;

        }

        .top li {
            text-decoration: underline;
            list-style: none;
            float: left;
            margin-left: 100px;
            line-height: 50px;
        }

        .one ,.two, .three ,    .four {
            float: left;
            width: 798px;
            margin: 50px 50px;

        }

        .body li {
            list-style: none;
            line-height: 50px;

        }
        .body li::after{
            content: "2018-10-1";
            float: right;
        }
        .bottom{
            width: 100%;
            float: left;
            text-align: center;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top">
            <ul>
                <li style="color: red;">首页</li>
                <li>新闻</li>
                <li>体育</li>
                <li>娱乐</li>
                <li>财经</li>
                <li>科技</li>
                <li>手机</li>
                <li>数码</li>
            </ul>
        </div>
        <div class="body">
            <div class="one">
                <h1>娱乐新闻</h1>
                <ul>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
                </ul>
            </div>
            <div class="two">
                <h1>军事新闻</h1>
                <ul>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
                </ul>
            </div>
            <div class="three">
                <h1>数码新闻</h1>
                <ul>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
            </div>
            <div class="four">
                <h1>手机新闻</h1>
                <ul>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
                    <li>111111111</li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <a href="">关于我们</a>
            <a href="">联系我们</a></a>
        </div>
    </div>
</body>

</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form{
            width: 248px;
            height: 220px;
            background-color: #f5eae8;
            padding: 30px 40px;
            border: 1px solid #f5eae8;
        }
        .username ,.password{
            width: 250px;
            height: 38px;
            border: 1px solid #ccc;
            margin-bottom: 30px;
            text-indent: 50px;
            background-color: #f5eae8;
        }
        button{
            width: 255px;
            height: 44px;
            margin: 25px auto;
            background-image: url(./but.jpg);

        }
        .bottom{
            width: 330px;
            height: 145px;
            background-color: #f5eae8;
            border-top: 1px solid #ddd;
            text-align: center;
            padding-top: 30px;
        }
        .username{
            background-image: url(./zhanghao.jpg) ;
            background-repeat: no-repeat;
        }
        .password{
            background-image: url(./mima.jpg) ;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" class="username" placeholder="用户名/邮箱地址/手机号">
        <input type="text" class="password" placeholder="填写密码">
        <div>
            <input type="checkbox">
            <span>记住密码</span><span style="color: gray;"> 欢迎注册 忘记密码</span>
        </div>
        <button class="btn"></button>
    </form>
    <div class="bottom">
        合作网站账号登录：<img src="./weixin.png" alt=""><img src="./qqlogin.png" alt=""><img src="./taobao.png" alt="">
    </div>
</body>
</html>
天金小麻花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html,css练习题
ZZZ___jh的博客
11-04 2509
html,css练习题 一. 选择题 在下列的 HTML 中,哪个可以产生超链接. B A. <a url="http://www.dapengjiaoyu.com">啦啦啦</a> B. <a href="http://www.dapengjiaoyu.com">啦啦啦</a> C. <a>http://www.hahaha.com</a> D. <a name="http://www.dapengjiaoyu.com"&
HTML与CSS练习题1
Long_1016的博客
11-26 7764
一、单选题（共30题，每题2分） 1.下面关于外部样式表的说法错误的是 A文件扩展名为 .cs B外部样式表内容不需要使用<style>标签 C使用<link>标签引入外部样式 D使用外部样式表可以使网站更加简洁，风格保持统一 正确答案:A 解析:文件扩展名为 .css 2.下列在HTML文档中插入样式表的方式，优先级最高的是 A外部样式表 B内部样式表 C层叠样式表 D内联样式表 正确答案:D 解析:样式表的优先级：内...
慕课网前端面试03--HTML/CSS面试题
sinat_28753227的博客
07-15 230
HTM和CSS基础
html考试
chirr的博客
06-29 292
#recycle { width: 200px; height: 50px; border: 1px dashed; text-align: center; line-height: 50px; } .photoframe { background: url(../image/photoframe.jpg) no-repeat; width: 500px; height: 438px; text-align: ce...
html css测试题,CSS 基本测试题
weixin_32842959的博客
06-05 401
下面提供了18道有关css的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。大家可以在评论区进行讨论。1.css区分大小写吗？ul {MaRgIn: 10px;}这种写法是否正确？2.为行内元素设置 margin-top 和 margin-bottom是否会产生影响？3.为行内元素设置 padding-top 和 padding-bottom是否会改变它的位置？4....
html css 练习素材
01-02
1. HTML练习文件：这些文件可能包含各种HTML5标签的示例，用于学习和实践如何创建网页结构。通过修改和运行这些文件，你可以了解每个元素的功能和用法。 2. CSS样式表：这些文件可能包含了CSS3的样式规则，涵盖了...
CSS+DIV练习题
05-07
CSS+DIV 练习题 本资源是一份详细的CSS+DIV 练习题目录，涵盖了选择题、填空题、简答题、案例分析题和设计题等多种题型，涉及到CSS的基本概念、选择器、CSS盒模型、布局、字体样式、背景样式、列表样式、表格样式、...
300道HTML、CSS习题及面试题（含答案）
09-18
这300道HTML、CSS习题及面试题的集合，旨在帮助学习者深入理解这两种语言的核心概念，提高实际应用能力，以及应对可能遇到的技术面试。 1. HTML基础知识： - 什么是HTML？HTML（超文本标记语言）是用于创建网页的...
html+css定位练习
08-05
在HTML和CSS的学习过程中，定位（Positioning）是至关重要的一个环节，它允许开发者精确地控制元素在网页上的布局。本练习集旨在帮助初学者掌握这一核心概念，特别是对定位理解不清晰的同学，通过实践可以更好地理解...
HTML_course.rar_html 练习题
09-14
本“HTML_course.rar_html 练习题”资源包含了一个完整的HTML学习课程，共分为七章，旨在帮助学习者深入理解和掌握HTML的基本概念、语法以及实际应用。通过这份资料，你可以系统地提升自己的HTML技能，并通过练习题...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 942
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 511
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】九、框架
weixin_49015558的博客
07-31 343
1 Vue2 实现方式 2 Vue3 实现方式 3 React 实现方式 4 Angular 实现方式
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 474
对于上云api开发学习过程中的错误教训积累总结
electron 主进程和渲染进程
qq_21087199的博客
07-29 339
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1831
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
@Fonden
07-30 311
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 525
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
【简历】湘南某二本学院：前端简历指导，秋招面试通过率低
最新发布
shuize123的博客
07-31 275
搜索和防抖之间有的区分，如果是有的话，可以去做一个处理，但是一般来说，这两个之间没什么太大关系，搜索和防抖，没有什么相关度，因为我们调后端接口都是异步调用，所以他不会出现卡顿现象，他的卡顿在什么地方，我觉得这个描述不太对，另外呢使用图片转载，这都是一个最小的一个事情，他就是一个基本的功能，就是可以说是都会的功能，所以亮点不够，至少这几个描述亮点还是有的，但是不够，挂号系统就没好讲了，这个依然是一个重度很高的项目。，其他的什么英语阅读，四级能力，这个不要去写了，没什么用。，又是登录，那登录这事太简单了，
网页设计练习题：HTML与CSS基础
这篇文档是一份关于网页设计的练习题集，主要涵盖HTML和CSS的基础知识，包括标记、属性、样式单以及超级链接等概念。以下是对这些知识点的详细说明： 1. HTML中的`<pre>`标记：这个标记用于预排版文本，它会保持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天金小麻花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值