第二十七章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.rhkb.cn/news/340967.html

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

相关文章

计算机毕业设计Python+Spark新能源汽车推荐系统 汽车大数据 汽车数据分析 汽车可视化 汽车爬虫 大数据毕业设计 大数据毕设 知识图谱 深度学习

黄河交通学院本科毕业设计&#xff08;论文&#xff09;任务书 学院&#xff1a;智能工程学院 学生姓名 刘丹杰 专业班级 大数据20-1班 学号 2080910T01521 指导教师 炎士涛 职称 副教授 学位 硕士 题目名称 基于Hadoop的新能源汽车销售数据分析系统的设计与实现…

【Unity美术】spine软件的使用—2D动画的制作

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…

群体优化算法---灰狼优化算法学习介绍以及在卷积神经网络训练上的应用

**长文预警**介绍 在自然界中&#xff0c;狼群的社会结构和捕猎策略展现了高度的智能和协调性&#xff0c;灰狼优化算法&#xff08;Grey Wolf Optimizer, GWO&#xff09;正是受此启发提出的一种群体智能优化算法。GWO主要模拟了灰狼的社会等级制度和捕猎行为&#xff0c;其核…

计算机毕业设计hadoop+spark+hive知识图谱音乐推荐系统 音乐数据分析可视化大屏 音乐爬虫 LSTM情感分析 大数据毕设 深度学习 机器学习

新余学院本科毕业设计(论文)开题报告 学 号 202253025 学生姓名 毛维星 届 别 24届 专 业 数据科学与大数据技术 指导教师 姓名及职称 潘诚 研究生 毕业设计 (论文)题目 基于HadoopSpark的音乐数据仓库的设计与实现 开 题 报 告 内 容 选题的依据…

使用Python操作Redis

大家好&#xff0c;在当今的互联网时代&#xff0c;随着数据量和用户量的爆发式增长&#xff0c;对于数据存储和处理的需求也日益增加。Redis作为一种高性能的键值存储数据库&#xff0c;以其快速的读写速度、丰富的数据结构支持和灵活的应用场景而备受青睐。本文将介绍Redis数…

加密经济浪潮:探索Web3对金融体系的颠覆

随着区块链技术的快速发展&#xff0c;加密经济正在成为全球金融领域的一股新的浪潮。而Web3作为下一代互联网的代表&#xff0c;以其去中心化、可编程的特性&#xff0c;正深刻影响着传统金融体系的格局和运作方式。本文将深入探讨加密经济对金融体系的颠覆&#xff0c;探索We…

C++数组实现推箱子游戏

前言 我是三天打鱼两天晒网的闲人,今天跟着课程视频学习c的数组的运用. 准备好游戏用到的图片资源 代码逻辑实现 #include<iostream> #include<graphics.h> #include<string> #include<conio.h>using namespace std;//设置画布大小 #define SCREEN…

kafka-守护启动

文章目录 1、kafka守护启动1.1、先启动zookeeper1.1.1、查看 zookeeper-server-start.sh 的地址1.1.2、查看 zookeeper.properties 的地址 1.2、查看 jps -l1.3、再启动kafka1.3.1、查看 kafka-server-start.sh 地址1.3.2、查看 server.properties 地址 1.4、再次查看 jps -l 1…

【python】OpenCV—Cartoonify and Portray

参考来自 使用PythonOpenCV将照片变成卡通照片 文章目录 1 卡通化codecv2.medianBlurcv2.adaptiveThresholdcv2.kmeanscv2.bilateralFilter 2 肖像画cv2.divide 1 卡通化 code import cv2 import numpy as npdef edge_mask(img, line_size, blur_value):gray cv2.cvtColor(…

代码随想录算法训练营第二十八天|93.复原IP地址 ,78.子集 ,90.子集II

93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; class Solution {ArrayList<String> results new ArrayList<>();public List<String> restoreIpAddresses(String s) {if(s.length() > 12){return new ArrayList<>();}char[] ipChars …

OBS+nginx+nginx-http-flv-module实现阿里云的推流和拉流

背景&#xff1a;需要将球机视频推送到阿里云nginx&#xff0c;使用网页和移动端进行播放&#xff0c;以前视频格式为RTMP&#xff0c;但是在网页上面播放RTMP格式需要安装flash插件&#xff0c;chrome浏览器不给安装&#xff0c;调研后发现可以使用nginx的模块nginx-http-flv-…

MySQL之查询性能优化(四)

查询性能优化 MySQL客户端/服务器通信协议 一般来说&#xff0c;不需要去理解MySQL通信协议的内部实现细节&#xff0c;只需要大致理解通信协议是如何工作的。MySQL客户端和服务器之间的通信协议是"半双工"的&#xff0c;这意味着&#xff0c;在任何一个时刻&#…

9.抽象类和接口

抽象类 抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类 比如&#xff1a; 我…

Vue进阶之Vue无代码可视化项目(二)

Vue无代码可视化项目 项目初始化路由子路由错误示范正确示范App.vuerouter/index.tsAboutView.vueAboutAboutview.vuerouter/index.ts项目路由router/index.tsApp.vueActionsView.vueDataSourceView.vueLayoutView.vue路由样式App.vue进一步的App.vue项目初始化 路由 router i…

高精度滚珠丝杆在自动化生产中的关键因素!

如今&#xff0c;自动化技术正以前所未有的速度改变着人们的生活和工作方式&#xff0c;特别是在高精度精密设备的制造与应用领域&#xff0c;提高生产效率和优化生产流程正变得越来越重要。在自动化生产中&#xff0c;滚珠丝杆的优化应用对于提高生产效率、保证产品质量至关重…

k8s Pods漂移时间配置

默认为300秒 apiVersion: apps/v1 kind: Deployment metadata:name: my-test spec:replicas: 1selector:matchLabels:app: my-apptemplate:metadata:labels:app: my-appspec:containers:- name: my-containerimage: nginx:latestports:- containerPort: 80tolerations:- key: &…

面试二十六、c++语言级别的多线程编程

一、 多线程编程 ​​​​​ 这里的c语言级别的多线程和linux的有一定的区别&#xff0c;c语言级别提供的多线程比较严格&#xff0c;如果主线程结束了&#xff0c;但是子线程没有结束&#xff0c;进程就会异常终止&#xff0c;而linux不会&#xff0c;会继续执行。 二、模拟卖…

LLama学习记录

学习前&#xff1a; 五大问题&#xff1a; 为什么SwiGLU激活函数能够提升模型性能&#xff1f;RoPE位置编码是什么&#xff1f;怎么用的&#xff1f;还有哪些位置编码方式&#xff1f;GQA&#xff08;Grouped-Query Attention, GQA&#xff09;分组查询注意力机制是什么&…

FL Studio21.2.8中文版水果音乐制作的革新之旅!

在数字化浪潮的推动下&#xff0c;音乐制作领域经历了翻天覆地的变化。从最初的模拟技术到如今的全数字化处理&#xff0c;音乐制作的门槛被大幅降低&#xff0c;越来越多的音乐爱好者和专业人士开始尝试自行创作和编辑音乐。在这个过程中&#xff0c;各种专业音乐制作软件成为…

CVE-2022-22947

漏洞描述 Spring Cloud Gateway 远程代码执行漏洞&#xff08;CVE-2022-22947&#xff09;发生在Spring Cloud Gateway应用程序的Actuator端点&#xff0c;其在启用、公开和不安全的情况下容易受到代码注入的攻击。攻击者可通过该漏洞恶意创建允许在远程主机上执行任意远程执行…