CSS与HTML交互综合案例

CSS综合案例

聊天室*联系人

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。 -->><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聊天室联系人</title><style>body{background-color:darkcyan;}h1{/* 设置元素中的内容水平居中对齐 */text-align:center;/* 设置字体的颜色 */color:darkorange;/* 设置字体的风格*/font-family: 'Courier New', Courier, monospace;/* 设置字体加粗 */font-weight:bold;/* 设置字体的大小 */font-size: 38px;/* 设置字体列间距 */letter-spacing: 1.5px;/* 给文本设置阴影:第一个参数：左右偏移量，第二个参数：上下偏移量，第三个参数：阴影扩散程度，第四个参数：阴影颜色*/text-shadow:1px 1px 1px rgb(209, 78, 179);}img {/* 设置图片的宽度 */width: 200px;/* 设置图片的高度 */height: 200px;/* 设置图片的圆角 */border-radius: 300px;/* 给图片设置边框 */border: 2px solid white;/* 给图片设置阴影效果 */box-shadow: 2px 2px 2px rgb(206, 113, 132);}table{/* 设置表格整体水平居中 */margin:auto;}td {/* 设置边框与自身内容之间的间隙 */padding: 10px;/* 设置自身元素中内容的对齐方式为居中 */text-align: center;}span {/* 将行内元素改成行内块级元素，这样就可以设置宽高了 */display:inline-block;/* 给元素添加背景颜色 */background-color:rgb(40, 104, 104);/* 设置元素与自身内容之间的间隙 */padding:10px 25px;/* 设置文本的大小*/font-size:18px;/* 设置字体的风格*/font-family: 'Courier New', Courier, monospace;/* 设置字体加粗 */font-weight:bold;/* 设置字体的颜色 */color:darkorange;/* 给元素添加边框 */border:1px solid rgb(221, 151, 248);/* 给盒子添加阴影效果 */box-shadow: 3px 3px 3px rgb(18, 139, 220);/* 设置部分角是圆角 */border-top-left-radius: 90px;border-bottom-left-radius: 90px;border-bottom-right-radius: 90px;border-top-right-radius: 90px;}</style>
</head>
<body><h1>聊天室*联系人</h1><table><tr><td><img src="微信图片_20211207210519.jpg" alt=""></td><td><img src="微信图片_20211207210542.jpg" alt=""></td><td><img src="微信图片_20211207210549.jpg" alt=""></td></tr><tr><td><span>1号联系人：奥拉弗</span></td><td><span>2号联系人：杰克</span></td><td><span>3号联系人：安迪</span></td></tr><tr><td><img src="微信图片_20211207210554.jpg" alt=""></td><td><img src="微信图片_20211207210559.jpg" alt=""></td><td><img src="微信图片_20211207210605.jpg" alt=""></td></tr><tr><td><span>4号联系人：大圣</span></td><td><span>5号联系人：朱莉</span></td><td><span>6号联系人：芬达</span></td></tr></table>
</body>
</html>

HTML网页效果图

CSS与HTML交互综合案例相关推荐

javascript+css学生信息表综合案例（附详细代码）
本文主要实现:通过获取input框value值,并将数据渲染到表格中,自动生成对应的学生信息表,同时可以删除相应的信息. <!DOCTYPE html> <html lang=&qu ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
前端：CSS/14/综合案例：传智首页
写代码前的准备工作 1,项目草图 2,网页的背景色,背景图片: 3,网站主页的宽度:100px: 4,将所有图片素材复制到images文件夹下: 5,创建一个CSS文件(因为此项目的CSS代码较多,方 ...
前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价
display属性功能:规定网页元素如何显示: 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示): block:可以实现将行内元素转换为块元素: inline:可以 ...
CSS基础-05-颜色取值、标签居中（了解即可）、综合案例-新闻内容
文章目录前言颜色常见取值标签水平居中方法总结综合案例新闻内容前言拓展内容颜色常见取值标签居中颜色常见取值属性名文字颜色:color 背景颜色:background-color 属 ...
0基础快速入门CSS技术栈（3）—图解详细阐述CSS文字文本样式及综合案例、样式调试工具、快速开发html的emment语法（附详细案例源码解析过程）
文章目录 1. CSS字体样式属性调试工具 2. font字体 2.1 font-size:大小 2.2 font-family:字体 2.2.1 CSS Unicode字体 2.3 font-wei ...
css笔记（css的三种引入方式综合案例新闻页面）
CSS引入方式 5.1CSS的三种样式表(CSS样式可以写在哪些地方) 5.2内部样式表(在html页面内部的style标签下写样式,也就是前面练习的所有)(优先级第二) 5.3行内样式表(优先级最高 ...
css实操：学成网综合案例
css实操:学成网综合案例页面效果: 易错点很多,需要注意的地方都有注释.常看! HBuilder X > css > 学成网首页.html <!DOCTYPE html> ...
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的示例代码: <!DOCTYPE html> <html lang ...

CSS与HTML交互综合案例

CSS综合案例

聊天室*联系人

HTML网页效果图

CSS与HTML交互综合案例相关推荐

最新文章

热门文章