第二十七章HTML.CSS综合案例

1.产品介绍

效果图如下:

代码部分如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>产品介绍</title><style>*{ /* 通用选择器 */margin: 0;padding: 0;}body{background-color: #f5f5f5;}a{color: #333333;text-decoration: none;}.box{height: 500px;width: 500px;background-color: rgb(236, 236, 236);margin: 100px auto;}.box img{ width: 100%;}.tushu{height: 50px;font-size: 20;padding: 0 15px; /* 外间距(上下  左右) */margin-top: 30px ;/* 内间距(上下  左右) */font-weight: bold; /* 字体加粗 */}.pingjia{font-size: 10px;color: #bbb;margin-top: 0;padding: 10px 25px;}.redmi{padding: 0px 25px;font-size: 10px;font-weight: bold; /* 字体加粗 */}.hongse{color: #ff0000;font-weight: bold; /* 字体加粗 */}</style>
</head>
<body><div class="box"><img src="../../C4D素材文件/人物图片·.png" alt=""><div class="tushu">图书写的真的很棒,书,人类发出的最美妙的声音。书,人类发出最美妙的声音。</div><div class="pingjia">来自于152379个人的评价</div><div class="redmi"><span>Redmi Air Dots真无线蓝.....</span>    <span> &emsp; | &emsp; </span><span class="hongse">10元</span></div></div>
</body>
</html>

2.表单登录页面

效果图如下:

代码如下:

<body><div class="tupian"><h3 align="center">60秒完成注册,幸福一辈子!</h3><form action="new_file.html" ><table border="0" align="center" cellpadding"0" cellspacing"5" ><tr><td>昵称:</td><td><input type="text" name="wen" /></td></tr><tr><td>性别:</td><td><input type="radio" name="sex" value="0" ><img src="../../C4D素材文件/小男孩.png" alt="" width="30" height="30">男<input type="radio" name="sex" value="0" ><img src="../../C4D素材文件/小女孩.png" alt="" width="30" height="30">女</td></tr><tr><td>生日:</td><td><select name="nian" id=""><option value="">请输入年份</option><option value="">1997</option><option value="">1998</option><option value="">1999</option><option value="">2000</option></select><select name="yue" id=""><option value="">请输入月份</option><option value="">一月</option><option value="">四月</option><option value="">九月</option></select><select name="日" id=""><option value="">请输入几号</option><option value="">1</option><option value="">2</option><option value="">3</option></select></td></tr><tr><td>婚姻状况:</td><td><input type="radio" name="hun" value="1">未婚<input type="radio" name="hun" value="1">已婚<input type="radio" name="hun" value="1">离异</td></tr><tr><td>学历:</td><td><select name="xueli" id=""><option value="">幼儿园</option><option value="">小学</option><option value="">初中</option><option value="">高中</option><option value="">大学</option></select></td></tr><tr><td>喜欢的类型:</td><td><input type="checkbox" name="duoxuan">妩媚的<input type="checkbox" name="duoxuan">帅气的<input type="checkbox" name="duoxuan">油腻的<input type="checkbox" name="duoxuan">腹肌男<input type="checkbox" name="duoxuan">搞笑女</td></tr><tr><td>自我介绍:</td><td><textarea name="10" id="10"></textarea></td></tr><tr><td></td><td><input type="submit" value="立即注册"></td></tr><tr><td></td><td><input type="checkbox" name="fu">我同意注册条款和会员加入标准</td></tr><tr><td></td><td><a href="#">我是会员立即注册</a></td></tr></table></div></form>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/24599.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++查看编译后的代码

C 模板函数是在编译时生成的。这种机制被称为“模板实例化”&#xff08;template instantiation&#xff09;。当你在代码中使用一个模板函数时&#xff0c;编译器会根据具体的模板参数&#xff08;例如类型或数值&#xff09;生成对应的函数实例。这个过程是在编译期间完成的…

Elastic Search (ES)Java 入门实操(1)下载安装、概念

实现数据查询代码&#xff1a;Elastic Search&#xff08;ES&#xff09;Java 入门实操&#xff08;2&#xff09;搜索代码-CSDN博客 Elastic Search&#xff08;ES&#xff09;Java 入门实操&#xff08;3&#xff09;数据同步-CSDN博客 Elastic Search 官方描述&#xff0c…

二叉树的最小深度-力扣

使用DFS&#xff0c;在取左右子树的最小值时&#xff0c;需要注意&#xff0c;当左右子树只存在一个时&#xff0c;此时有一个返回值为0&#xff0c;此时不能用0作为最小深度&#xff0c;而是另一颗不为0的子树的最下深度&#xff0c;才是需要的值。 class Solution { public:…

UG怎么取消编程平面显示:深入解析与实用指南

UG怎么取消编程平面显示&#xff1a;深入解析与实用指南 UG&#xff08;Unigraphics NX&#xff09;作为一款功能强大的计算机辅助设计与制造软件&#xff0c;广泛应用于各种工业领域。在UG的编程和加工模块中&#xff0c;编程平面的显示对于操作至关重要。但有时&#xff0c;…

Python下载库

注&#xff1a;本文一律使用windows讲解。 一、使用cmd下载 先用快捷键win R打开"运行"窗口&#xff0c;如下图。 在输入框中输入cmd并按回车Enter或点确定键&#xff0c;随后会出现这个画面&#xff1a; 输入pip install 你想下载的库名&#xff0c;并按回车&…

贰[2],VisionMaster/.NetCore的WPF应用程序调用控件

1&#xff0c;环境 VisionMaster4.2 VisualStudio2022 WPF/.Net6.0 2&#xff0c;记录原因 .NetFrameWork的WPF应用程序调用添加例程.NetFrameWork的Winform应用程序相应的库&#xff0c;不会出现报错&#xff0c;界面也能正常显示操作&#xff0c;但是.NetCore的程序却总是…

阿里云发送国内短信怎样编程

1.准备&#xff1a;阿里云注册&#xff0c;新建用户并授权&#xff0c;获取appkey和secret&#xff0c;开通短信服务&#xff0c;申请资质签名模板&#xff0c;短信服务右下角openapi查看文档和下载实例&#xff0c;在线客服咨询遇到的问题 2.依赖引入&#xff1a; <depend…

JavaScript入门宝典:核心知识全攻略(下)

文章目录 前言一、获取标签元素二、操作标签元素属性1. 属性的操作2. innerHTML 三、数组及操作方法1. 数组的定义2. 数组的操作 四、循环语句五、字符串拼接六、定时器1. 定时器的使用3. 清除定时器 七、ajax1. ajax的介绍2. ajax的使用 前言 JavaScript是前端开发不可或缺的技…

Typescript 中 tsconfig.json 无法写入文件,因为它会覆盖输入文件

先来看看问题 在开发ts项目的时候&#xff0c;包错提示无法写入文件 tsconfig.json无法写入文件"url"因为它会覆盖输入文件 这是tsconfig.json文件配置问题&#xff0c;需要加入下面的配置就好了&#xff1a; {"compilerOptions": {"outDir": …

【MySQL数据库】:MySQL索引特性

目录 索引的概念 磁盘 磁盘的基本特征 MySQL与磁盘交互的基本单位 索引的理解 建立测试表 理解单个Page 理解多个Page 页目录 单页情况 多页情况 索引的数据结构 聚簇索引 VS 非聚簇索引 索引操作 创建主键索引 创建唯一索引 创建普通索引 创建全文索引 查询…

海宁代理记账公司-专业的会计服务

随着中国经济的飞速发展&#xff0c;企业的规模和数量日益扩大&#xff0c;在这个过程中&#xff0c;如何保证企业的财务活动合规、准确无误地进行&#xff0c;成为了每个企业面临的重要问题&#xff0c;专业、可靠的代理记账公司应运而生。 海宁代理记账公司的主要职责就是为各…

Prism 入门06,发布订阅(入门完结)

本章节介绍使用 Prism 框架的消息聚合器 IEventAggregator ,实现如何进行消息发布,订阅,取消订阅的功能 继续使用上一章节使用的 Prism WPF 空模板项目 BlankApp1 1.首先,在使用 Prism 框架当中,进行事件消息的发布和订阅之前,需要定义发布事件的事件消息模型。如下所示:…

如何手撸一个java缓存框架

创建一个简单的Java缓存框架涉及到多个方面&#xff0c;包括数据结构的选择、缓存策略的实现、线程安全的保证等。下面是一个简单的Java缓存框架的核心代码案例&#xff0c;它将展示如何实现一个基本的缓存机制。 首先&#xff0c;我们定义一个Cache接口&#xff0c;它包含缓存…

探索str Python用法:深入理解字符串操作的精髓

探索str Python用法&#xff1a;深入理解字符串操作的精髓 在Python的广袤天地中&#xff0c;str类型无疑占据着举足轻重的地位。它不仅是数据处理和信息交换的基石&#xff0c;更是我们与计算机世界沟通的桥梁。然而&#xff0c;str的用法远非表面所见那般简单&#xff0c;它…

端午节景区视频监控方案:智慧景区EasyCVR视频监控系统构建与运用

端午节&#xff0c;作为中国传统节日之一&#xff0c;每年吸引着大量游客前往各地景区参观游览&#xff0c;感受浓厚的文化氛围。然而&#xff0c;随着游客数量的增多&#xff0c;景区管理也面临着越来越多的挑战&#xff0c;其中安全问题尤为突出。因此&#xff0c;实施端午节…

顺序表、链表、栈和队列总结

目录 顺序表 链表 栈 队列 总结 补充 顺序表 实现 链表 实现 栈 实现 队列 实现 顺序表、链表、栈和队列都是线性数据结构&#xff0c;但它们在管理和访问数据方面有不同的特点和用途。以下是它们之间的主要区别&#xff1a; 顺序表 存储方式&#xff1a;在连续…

使用 ESPCN 模型进行超分辨率图像处理

前言 使用 ESPCN (Efficient Sub-Pixel CNN) 模型对低分辨率的图像&#xff0c;进行超分辨率处理。 效果展示 lowres 表示低分辨率图像&#xff0c;highres 表示高分辨率图像&#xff0c;prediction 表示模型预测的高分辨率图像&#xff0c;可以看出模型在生成高分辨率图像过…

力扣hot100:155. 最小栈(栈,辅助栈存储相关信息)

LeetCode&#xff1a;155. 最小栈 1、尝试单调栈 看到这题说&#xff0c;要常数时间内检索最小元素的栈&#xff0c;想到了单调栈&#xff0c;递增单调栈确实能维护最小值&#xff0c;但是这个最小值是存在一定意义的&#xff0c;即如果后面出现了最小值&#xff0c;那么前面…

光电管道液位传感器与电容式液位开关相比

如今&#xff0c;随着检测液位技术的不断发展&#xff0c;检测液位的方法也越来越多&#xff0c;比如浮球开关、电容式液位传感器、管道式液位传感器等等&#xff0c;那么光电管道液位传感器与电容式液位开关相比&#xff0c;有哪些优势&#xff1f; 光电管道液位传感器采用先…

论文高级图表绘制(Python语言,局部放大图)

本文将通过一个具体的示例,展示如何使用Python语言和Matplotlib库来绘制高级图表,包括局部放大图的制作。适用于多条曲线绘制在同一个图表中,但由于数据量过大,导致曲线的细节看不清,需要对细节进行局部放大。如下图: 环境准备 首先,确保你的Python环境中已经安装了以…