Web前端平时练习

已于 2023-04-17 20:36:27 修改
阅读量64 收藏
点赞数
文章标签： 前端
于 2023-04-17 20:31:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sealfight/article/details/130208333
版权

平时练习二

1. 应用html标签和css完成如下所示页面效果，图片见附件。

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

代码：

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">
		<title>E2.1</title>
	</head>

	<body>
		<div>
			<div class="T1">
				<img src="./images/4.jpg" >
				<div class="T2">
					<div class="SubTiltle">不只有看肤色挑唇色 选对口红衣服更美</div>
					<div class="SubContent1">
						<div class="label">标签</div>
						<div class="labelnr">唇膏</div>
						<div class="labelnr">衣服</div>
						<div class="labelnr">粉色</div>
						<div class="labelnr">化妆</div>
						<div class="labelnr">美容美体</div>
					</div>
					<div class="SubContent2">
						<div class="SubContent21">悦己self</div>
						<div class="SubContent22">2016-10-18</div>
					</div>
				</div>
			</div>
			<div class="T1">
				<img src="./images/5.jpg" >
				<div class="T2">
					<div class="SubTiltle">学画红唇妆 让你的女王范分分钟秒杀路人</div>
					<div class="SubContent1">
						<div class="label">标签</div>
						<div class="labelnr">唇膏</div>
						<div class="labelnr">衣服</div>
						<div class="labelnr">粉色</div>
						<div class="labelnr">化妆</div>
						<div class="labelnr">美容美体</div>
					</div>
					<div class="SubContent2">
						<div class="SubContent21">毛戈平形象艺术学校</div>
						<div class="SubContent22">2016-10-18</div>
					</div>
				</div>
			</div>
			<div class="T1">
				<img src="./images/6.jpg" >
				<div class="T2">
					<div class="SubTiltle">无数次给外国博主跪了 把自己的脸画成漫画人物好逼真</div>
					<div class="SubContent1">
						<div class="label">标签</div>
						<div class="labelnr">美容美体</div>
					</div>
					<div class="SubContent2">
						<div class="SubContent21">八公举</div>
						<div class="SubContent22">2016-10-18</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<style>
    body{
        display: flex;
        justify-content: center;
    }
    
    .T2{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
    }

    .SubTiltle{
        font: 20px 黑体;
    }

    .SubContent1{
        display: flex;
        align-items: center;
    }

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

    .labelnr{
        margin-left: 5px;
        padding: 3px;
        background-color: #eee ;
        color: #999 ;
        font-size: 14px;
    }

    .T1{
        width: 860px;
        height: 130px;
        border-top: 2px solid #ccc;
        padding: 20px 0px 20px 0px;
        display: flex;
    }
    
    .T1 img{
        width: 180px;
        height: 100%;
    }

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

    .SubContent2{
        display: flex;
        align-items: center;
    }

    .SubContent21{
        border: 1px solid #eee;
        border-radius: 25px;
        color: #999 ;
        padding: 3px 10px 3px 10px;
    }

    .SubContent22{
        margin-left: 5px;
        color: #999 ;
    }
    
</style>

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

示例
代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>E2.2</title>
	</head>

	<body>

		<div class="topNavigation">
			<span class="index"><a href="">首页</a></span>
			<span class="other"><a href="">新闻</a></span>
			<span class="other"><a href="">体育</a></span>
			<span class="other"><a href="">娱乐</a></span>
			<span class="other"><a href="">财经</a></span>
			<span class="other"><a href="">科技</a></span>
			<span class="other"><a href="">手机</a></span>
			<span class="other"><a href="">数码</a></span>
		</div>

		<div class="content">
			<div class="bulk">
				<div class="title">娱乐新闻</div>
				<div class="subContent">
					<span>大家都不想在里面混</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>《碟中谍5》曝外景地花絮</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>灾难发生后</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>多部好莱坞大片登陆中国</span>
					<span>2018-10-1</span>
				</div>
			</div>

			<div class="bulk">
				<div class="title">军事新闻</div>
				<div class="subContent">
					<span>09:00开始</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>严厉告诫</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>网页</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>精锐尽出</span>
					<span>2018-10-1</span>
				</div>
			</div>

			<div class="bulk">
				<div class="title">数码新闻</div>
				<div class="subContent">
					<span>微软已在秘密测试Android版Edge浏览器</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>平板电脑五年走到市场拐点</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>苹果邀请函解密Hint有新释义</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>IDF2018英特尔谷歌联手</span>
					<span>2018-10-1</span>
				</div>
			</div>

			<div class="bulk">
				<div class="title">手机新闻</div>
				<div class="subContent">
					<span>超大运行内存手机推荐</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>国产旗舰手机盘点</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>西门子归来 首款智能手机配置强跑分出色</span>
					<span>2018-10-1</span>
				</div>
				<div class="subContent">
					<span>骗子植入手机木马的10大招术</span>
					<span>2018-10-1</span>
				</div>
			</div>

		</div>
		<div class="footer">
			<span>
                <a href="">关于我们</a>
            </span>
			<span>
                <a href="">联系我们</a>
            </span>
		</div>
	</body>
</html>


<style>
    body{
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .topNavigation{
        width: 1000px;
        padding: 15px 20px 15px 20px;
        background-color: #a1a1a1;
        border-radius: 2px;
    }

    .index{
        margin-left: 60px;
    }
    .index a{
        color: red;
        font-weight: 750;
    }
    .other{
        margin-left: 50px;
    }
    .other a{
        color: #fffff5;
        font-weight: 750;
    }

    .content{
        width: 1000px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .bulk{
        width: 450px;
    }
    .title{
        margin-bottom: 40px;
        margin-top: 40px;
        font-size: 20px;
    }
    .subContent{
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        margin-left: 45px;
        margin-bottom: 15px;
    }

    .footer{
        margin-top: 75px;
    }
    .footer a{
        font-size: 15px;
        font-weight: 700;
        color: black
    }
</style>

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>

	<head>
		<meta charset="utf-8">
		<title>E2.3</title>
	</head>
	
	<body>
		<div class="content">

			<input type="text"  class="input01" placeholder="用户名/邮箱/手机号">
			<input type="text"  class="input02" placeholder="填写密码">

			<div>
                <input type="checkbox" />
                <span class="password">记住密码</span>
				<span class="subFooter">欢迎注册</span>
				<span class="subFooter">忘记密码</span>
			</div>

			<button>登 录</button>
		</div>

		<div class="otherWebsite">
			<div>
				<span>合作网站账号登陆：</span>
				<img src="./images/weixin.png" alt="">
				<img src="./images/qqlogin.png" alt="">
				<img src="./images/taobao.png" alt="">
			</div>
		</div>

	</body>

</html>

<style>
    body{
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .content{
        width: 248px;
        height: 220px;
        background-color: #F5EAE8;
        padding: 30px 40px 30px 40px;
        border: 1px solid #F5EAE8;
    }

    .input01{
        width: 250px;
        height: 38px;
        border: 1px solid #CCC;
        margin-bottom: 30px;
        background-color: #F5EAE8;
        text-indent: 50px;
        background-image: url("images/zhanghao.jpg");
        background-repeat: no-repeat;
        background-position: 0 -3px;
    }
    .input01::placeholder,.input02::placeholder{
        font-size: 16px;
        
    }

    .input02{
        width: 250px;
        height: 38px;
        border: 1px solid #CCC;
        margin-bottom: 30px;
        background-color: #F5EAE8;
        text-indent: 50px;
        background-image: url("images/mima.jpg");
        background-repeat: no-repeat;
        background-position: 0 -3px;
    }

    input[type=radio]{
        display: none;
    }

    .password{
        font-size: 14px;
    }

    .subFooter{
        font-size: 14px;
        color: #999;
        margin-left: 10px;
    }

    button{
        width: 255px;
        height: 44px;
        margin: 20px 0 25px 0;
        background-color: #d72837;
        border: none;
        color: white;
        font-size: 16px;
    }

    .otherWebsite{
        width: 330px;
        height: 140px;
        background-color: #F5EAE8;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: center;
        padding-top: 20px;
    }
</style>
Sealgost
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
----web前端 实验二
TobEABetterMan_的博客
03-22 467
学习目标： 前两道 第一题： 提示：仅做参考，记得修改class 和 id <!DOCTYPE html> <html lang = "en"> <head> <meta charset='utf-8'> <title>Document-2</title> </head> <body> <div id="root">
web前端笔记
m0_74148715的博客
02-28 1159
html、css
从零开始学WEB前端——HTML实战练习
热门推荐
su_zui的博客
02-09 1万+
????项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员????。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员????。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过
web前端面试学习指南
web全栈开发的博客
05-30 334
分享一款面试实用题库 web前端面试助手 这篇文章很长，但的确是一篇非常干的干货，讲诉了 HTML、JavaScript、CSS、jQuery使用的一些规范与建议，前端的同学可以认真阅读此文，并比较自己平时的一些习惯，看是否有改进的地方…… HTML 咋地了, DOCTYPE? 不定义DOCTYPE是一种可以被判死刑的罪行。 以前你可能用的是下面的DOCTYPE，不过你要知道现在已经有更简洁清晰的代码取而代之了。 <!DOCTYPE html PUBLIC "-/....
web前端平时作业.zip
04-01
如果不想用积分 可以去这里下载 ... zucc web 前端课 一些平时作业 并不完整, ...Web前端设计从入门到实战 HTML5 CSS3 JavaScript项目案例开发 第2版 张树明 这本书上的一些练习 , 这本书的练习书上有二维码 可以下载的
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
平时练习的一些前端动效基于HTML5CSS3CanvasSvg
08-10
本主题聚焦于"平时练习的一些前端动效基于HTML5CSS3CanvasSvg"，这表明我们将探讨如何利用这些现代Web技术来创建动态、引人入目的用户界面。 **HTML5** 是超文本标记语言的最新版本，它极大地增强了Web开发的功能，...
平时练习的一些前端动效，基于HTML5，CSS3，Canvas，Svg.zip
02-12
这个名为"平时练习的一些前端动效，基于HTML5，CSS3，Canvas，Svg.zip"的压缩包文件，显然是一个关于前端动效的实践项目，涉及到现代Web技术的核心元素：HTML5、CSS3以及Canvas和SVG。下面我们将详细探讨这些知识点...
web:这个文件夹里面是web方面的代码，扩展自己平时学习练习时写的代码
03-22
在IT行业中，Web开发是一项至关重要的技能，涵盖了前端和后端技术，以及各种框架和工具。这个名为"web"的文件夹显然包含了作者在学习和练习Web开发时编写的代码。"系统开源"的标签表明这些代码可能是基于开源项目...
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 192
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 298
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 256
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 195
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 886
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1391
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
this指向解析
最新发布
Zrf2191318455的博客
07-14 211
2.3：调用构造函数personA中的show2函数，为箭头函数，指向外层最近的普通函数的this，在第一题中，person1只是一个对象，所以指向windows，但是在第二题中，personA为构造函数，show2指向的就是personA，所以依旧打印personA。1.8：调用person1中的show4函数，并再次调用返回函数，show4为普通函数，返回函数为箭头函数，箭头函数的this指向为外面最近一层普通函数的this，即show4的this，因此打印person1。
ReactRouter v6升级的步骤
feixin369的博客
07-14 180
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
前端工具-json-server
zhangankang的博客
07-14 72
以项目为例，介绍前端mock数据的方式；
web前端基础练习题
02-28
以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值