web实验二

已于 2023-04-18 20:14:58 修改
阅读量117 收藏
点赞数
文章标签： 前端 css html
于 2023-04-18 19:33:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56993984/article/details/130229224
版权
  1. 应用html标签和css完成如下所示页面效果，图片见附件。

说明：

  • 内容相对于浏览器居中,宽860px
  • 鼠标移动至列表项上，显示背景色#F8F8F8
  • 分割线2px solid #ccc，每项高130px
  • 第一行文字：20px 黑体
  • 标签：字颜色#cccc00 16px
  • 标签项：背景颜色#eee 字体颜色#999 文字大小14px
  • 第三行文字：边框1px solid #eee; 圆角半径25px

其他样式可根据界面效果进行设置

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .big {
            width: 860px;
            height: 130px;
            margin: 0 auto;
            border-top: 2px solid #ccc;

        }

        .big:hover {
            background-color: #F8F8F8;
        }

        .one {
            font-size: 20px;
            font-family: '黑体';
            margin-top: 15px;
            margin-bottom: 20px;
        }
        .two {
            margin-bottom: 15px;
        }

        .two span {
            background-color: #eee;
            color: #999;
            font-size: 14px;
        }

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

        img {
            height: 100px;
            margin-top: 15px;
            margin-right: 20px;
            float: left;
        }
        .three span:first-child{
            border: 1px solid #eee;
            border-radius: 25px;
        }
        .three span {
            color: #999;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="big">
        <img src="./images2/4.jpg">
        <div class="one">不只有看肤色挑唇色 选对口红衣服更美</div>
        <div class="two">
            <span id="tag">标签</span>
            <span>唇膏</span>
            <span>衣服</span>
            <span>粉色</span>
            <span>化妆</span>
            <span>美容美体</span>
        </div>
        <div class="three">
            <span>悦己self</span>
            <span>2016-10-18</span>
        </div>

    </div>
    <div class="big">
        <img src="./images2/5.jpg">
        <div class="one">学画红唇妆 让你的女王范分分钟秒杀路人</div>
        <div class="two">
            <span id="tag">标签</span>
            <span>唇膏</span>
            <span>衣服</span>
            <span>粉色</span>
            <span>化妆</span>
            <span>美容美体</span>
        </div>
        <div class="three">
            <span>毛戈平形象艺术学校</span>
            <span>2016-10-18</span>
        </div>

    </div>
    <div class="big">
        <img src="./images2/6.jpg">

        <div class="one">无数次给国外博主跪了 把自己的脸画成漫画人物好逼真</div>
        <div class="two">
            <span id="tag">标签</span>
            <span>美容美体</span>
        </div>
        <div class="three">
            <span>八公举</span>
            <span>2016-10-18</span>
        </div>

    </div>
</body>

</html>

2.完成如图所示界面布局和显示效果

<!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>
        
        .big {
            width: 900px;
            margin: 0 auto;

        }
        .title {
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            background-color: gray;
        }

        .title a {
            color: white;
            margin-left: 30px;

        }

        .title a:hover {
            color: red;
        }

        span {
           float: right;
           margin-left: 60px;
        }
        dl {
            display: inline-block;
        }
        dd {
            font-size: 14px;
            line-height: 40px;
        }
        .right {
            margin-left: 100px;
        }
        .help {
           text-align: center;
           margin-top: 50px;
        }
        .help a{
            color: #000;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="title">
            <a href="#">首页</a>
            <a href="#">新闻</a>
            <a href="#">体育</a>
            <a href="#">娱乐</a>
            <a href="#">财经</a>
            <a href="#">科技</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </div>
    
    
        <dl>
            <dt>
                <h4>娱乐新闻</h4>
            </dt>
            <dd>已没有<span>2018-10-1</span></dd>
            <dd>外景地花絮<span>2018-10-1</span></dd>
            <dd>娱乐节目 <span>2018-10-1</span></dd>
            <dd>多部好莱坞大片登陆 <span>2018-10-1</span></dd>
        </dl>
        <dl class="right">
            <dt>
                <h4>新闻</h4>
            </dt>
            <dd>2018在3日09：00开始 <span>2018-10-1</span></dd>
            <dd>对十二句<span>2018-10-1</span></dd>
            <dd>在网站开设关于网页 <span>2018-10-1</span></dd>
            <dd>尽出 <span>2018-10-1</span></dd>
        </dl>
        <dl>
            <dt>
                <h4>娱乐新闻</h4>
            </dt>
            <dd>已没有 大家都不想在里面混 <span>2018-10-1</span></dd>
            <dd>《碟中谍5》曝外景地花絮<span>2018-10-1</span></dd>
            <dd>灾难发生后该不该禁播娱乐节目 <span>2018-10-1</span></dd>
            <dd>多部好莱坞大片登陆 <span>2018-10-1</span></dd>
        </dl>
        <dl class="right">
            <dt>
                <h4>新闻</h4>
            </dt>
            <dd>2018在9月3日09：00开始 <span>2018-10-1</span></dd>
            <dd>对十二句<span>2018-10-1</span></dd>
            <dd>在网站开设关于网页 <span>2018-10-1</span></dd>
            <dd>精瑞尽出 <span>2018-10-1</span></dd>
        </dl>

        <div class="help">
            <a href="#">关于我们</a>
            &nbsp;
            <a href="#">联系我们</a>
        </div>

    </div>
    
</body>

</html>

3.完成如下表单界面设计，图片见附件。

  • 表单宽248px，高220px，背景色#F5EAE8，上下内边距30px  左右内边距40px，边框1px solid #F5EAE8
  • 输入框宽250px，高38px，边框1px solid #CCC，下外边距30px。文本缩进50px，便于显示前方图标。前方图标可考虑背景图片进行设置。
  • 按钮宽255px，高44px，外边距上下25px，左右居中
  • 合作网站区域宽330px 高145px，背景颜色#F5EAE8，上边框1px solid #ddd
  • 内容居中显示
<!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 30px 40px;
            margin: 0 auto;
            border: 1px solid #F5EAE8;
        }
        .user input{
            width: 250px;
            height: 38px;
            border: 1px solid #CCC;
            margin-bottom: 30px;
            text-indent: 50px;
            background-color: #F5EAE8;
        }
        .user input:first-child{
            background-image: url(./images2/zhanghao.jpg);
            background-repeat: no-repeat;
        }
        .user input:last-child{
            background-image: url(./images2/mima.jpg);
            background-repeat: no-repeat;
        }
        .login img {
            width: 255px;
            height: 44px;
            margin: 25px auto;
        }
        .cooper {
            width: 330px;
            height: 145px;
            margin: 0 auto;
            background-color: #F5EAE8;
            border-top: 1px solid #ddd;
        }
        .cooper div{
            text-align: center;
            margin-top: 20px;
        }
        form span {
            font-size: 14px;
            color: #CCC;
            margin-left: 10px;
        }


    </style>
</head>
<body>
    <form action="">
        <div class="user">
                <input type="text" placeholder="用户名/邮箱地址/手机号">
                <input type="password" placeholder="填写密码">
        </div>

        <input type="checkbox" name="" id="">
        记住密码
        <span>欢迎注册 忘记密码</span>

        <div class="login">
            <img src="./images2/but.jpg">
        </div>
    </form>

    <div class="cooper">
        <div>
            合作网站账号登录：<img src="./images2/weixin.png">
            <img src="./images2/qqlogin.png">
            <img src="./images2/taobao.png">
        </div>
        
    </div>
    
</body>
</html>

好多头发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
05HTML5学习之页面布局
weixin_43762330的博客
12-16 306
页面布局 盒模型   文档中的每一元素都被认为是一个矩形盒子。如下图所示，盒子是由内容区以及围绕着内容区的内边距、边框以及外边距组成。这就是所谓的盒模型。 内容   内容区由文本和其它诸如图像、段落、标题、列表之类的网页元素组成。页面上元素的可见宽度为内容、内边距和边框三者宽度的总和。当然，width属性仅设置了内容的实际宽度；它并不包括内边距、边框或外边框。 内边距   内边距（Paddi...
网络教育计算机统考-文字处理操作题
热门推荐
cdz12的博客
05-04 2万+
请考生根据题目要求，选择正确的操作步骤并把步骤按顺序填写在答题处。 题目要求： 打开考生文件夹下的文件“exam20.docx”，完成以下操作： （1）在标题前插入图片（基本形状中的“笑脸”），设为“嵌入型”环绕，调整大小，填充颜色选“黑色，文字1”； （2）将标题字体设为楷体、36磅，为标题加边框和紫色底纹（应用范围为文字），居中； （3）把所有文字中的“网络”改为“NETWORK”。 操作完成后以原文件名保存在考生文件夹下。 操作步骤： 1.选中标题，点击“开始“ 选项卡中 ”字体“ 组的 ”字体“ /
前端预览word文件_2020国开形考计算机练习题Word练习
weixin_28899845的博客
01-11 2018
选择1.在Word文档中要设置“页边距”，则应该使用 。“文件|打印”选项卡中的“页面设置”命令2.若要在打印文档之前预览应使用的命令是“文件|打印”功能选项中右边的窗口3.在Word中，每个段落以用户输入Enter键结束4.在Word的编辑状态下，当前编辑文档中的字体全是宋体字，选择了一段文字使之成选中状态，先设定了楷体又设定了仿宋体则 。被选择的内容变为仿宋体5.在Word的编辑内容中，文字下...
计算机统考-ppt操作题2
cdz12的博客
09-01 1833
（1）将幻灯片文本框内的文字设成一栏显示（去除分栏）； （2）将所有文字设置1.5倍行距显示效果，框内底纹设成黄色； （3）设置幻灯片中文字动画飞入效果为：自右上部慢速（持续时间3秒）飞入。...
web实验一
lixuepeng_001的博客
09-18 913
实验内容： 一、实验目的: 掌握HTML语言标记 掌握HTML元素的的基本结构 学习使用文本编辑器创建HTML文档 理解文本编码的作用与意义 实验内容： 创建HTML文档 定义title 定义字符编码为UTF-8 定义关键词与描述 定义一个标题 定义一个段落 在段落内定义使用上标定义显示X^2 定义一个外联的超链接 声明一个内部超链接锚点，并定义一个链接 定
web实验6
brolyLoveEng的博客
04-23 65
【代码】web实验6。
web实验二：管理界面
06-03
制作管理界面，其中需插入两张图片分别命名为img1和img2
web实验2截图.docx
06-21
### 二、HTML与CSS样式 **2.1 HTML文档结构：** 文档采用了XHTML 1.0 Transitional标准，使用`<!DOCTYPE>`声明定义了文档类型。页面由`<html>`标签包裹，包含了`<head>`和`<body>`两大部分。 **2.2 CSS样式：** 在...
Web实验报告.doc
11-28
* ASP.NET 是微软公司推出的一个基于Web 的应用程序开发框架，它允许开发人员使用.NET Framework 创建动态网页。 * ASP.NET 使用C#或VB.NET等语言开发，支持HTML、CSS、JavaScript等技术。 * ASP.NET 应用程序可以...
23215120613王祉琪web实验2.zip
05-21
在给定的压缩包文件"23215120613王祉琪web实验2.zip"中，只有一个子文件"23215120613王祉琪web实验2.html"。从这个文件名我们可以推测，这可能是一个与Web开发相关的实验作业或项目，由学生王祉琪完成，编号可能是...
Web安全实验二.docx
09-29
web作业
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 594
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1051
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 435
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 714
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 212
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1019
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
vue-lic（三）
最新发布
qq_64669006的博客
08-14 154
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
智启万象 | Web 开发智能升级、简单易用
谷歌开发者
08-10 977
AI 的融入使 Web 的功能更加强大同时也更加简单易用一起回顾 2024 Google 开发者大会了解 Web 开发 UI 功能和 OS 集成的最新创新以及如何通过这些创新来打造卓越的应用体验Web 不断的革新与发展，不仅为全球数十亿用户提供了丰富多样的在线体验，也为开发者提供了实现创意和构建未来的可能。谷歌提供工具和解决方案，帮助 Web 开发者基于实际数据做出明智的技术选型和开发决策。Bas...
Web实验教程：ASP与CSS实践
"这是一份针对学生的Web实验指导书，涵盖了使用ASP和CSS进行网页设计以及JavaScript编程的基础知识。实验内容包括HTML基本元素的使用、CSS样式应用、JavaScript交互功能的实现，旨在提升学生的Web开发技能。" 实验...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值