HTML的Demo实例

最新推荐文章于 2023-06-27 09:37:43 发布

二木成林

最新推荐文章于 2023-06-27 09:37:43 发布

阅读量4.3k

点赞数 1

分类专栏： # HTML 文章标签： HTML CSS

本文链接：https://blog.csdn.net/cnds123321/article/details/104193787

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Demo1

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo1</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#nav {
				/* 设置图片和文字水平居中显示 */
				text-align: center;
			}

			#nav h1 {
				margin-top: 20px;
				font-size: 20px;
				color: #16b8c7;
			}

			#nav img {
				/* 设置图片的宽高 */
				width: 50px;
				height: 50px;
				/* 将图片设置为圆形，设置为50%即为圆形 */
				border-radius: 50%;
			}

			#nav p.name {
				margin-top: 10px;
			}

			#nav p.title {
				color: #929292;
				font-size: 14px;
				margin-top: 12px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<h1>星星幼儿园</h1>
			<img src="../img/问奈何.jpg" alt="用户头像">
			<p class="name">root</p>
			<p class="title">院长</p>
		</div>
	</body>
</html>

Demo2

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo1</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				/* 因此设置html和body元素的高度为100%即可显示高度了 */
				height: 100%;
			}

			.container {
				/* 设置弹性盒子布局 */
				display: flex;
				/* #right和#left的父级元素是.container，因此也将其设置为100%，但是还是无法显示，因为还有父级元素body和html，其高度未设置 */
				height: 100%;
			}

			#right {
				text-align: center;
				/* 设置右边的div为固定宽度 */
				width: 300px;
				/* 希望div的高度填满浏览器窗口，但是设置后界面无显示，因为div块级元素的高度100%是继承的父级元素的高度，因此需要设置父级元素的高度也为100% */
				height: 100%;
			}

			#left {
				/* 设置右边的div占用剩下的宽度 */
				flex: 1;
				/* 设置一个背景色便于观察显示 */
				background: gray;
				/* 希望div的高度填满浏览器窗口，但是设置后界面无显示，因为div块级元素的高度100%是继承的父级元素的高度，因此需要设置父级元素的高度也为100% */
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="right">

			</div>
			<div id="left">

			</div>
		</div>
	</body>
</html>

Demo3

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo1</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
			}

			.container {
				display: flex;
				height: 100%;
			}

			#right {
				text-align: center;
				width: 300px;
				height: 100%;
			}

			#left {
				flex: 1;
				background: gray;
				height: 100%;
			}

			#left #header {
				/* 给名为header的div设置一个高度，然后剩下的div占用剩下的空间 */
				height: 50px;
				/* 设置一个背景色便于观察 */
				background: #55A532;
				/* 由于p元素是块级元素，会把span元素挤下去，所以将其设置为flex弹性盒子 */
				display: flex;
				/* 使其中的元素垂直居中 */
				align-items: center;
				/* 设置文字颜色为白色 */
				color: white;
			}

			#left #header p {
				/* 设定flex来占用名为header的剩下空间 */
				flex: 1;
			}

			#left #header a {
				/* 而名为header的div中的a元素设定一个固定宽度50px */
				width: 50px;
				margin-right: 24px;
			}

			#left #content {
				/* 设置一个背景色便于观察 */
				background: #16B8C7;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="right">

			</div>
			<div id="left">
				<div id="header">
					<p>2020年2月3日 11:52:11</p>
					<a href="#"><span>注销</span></a>
				</div>
				<div id="content">

				</div>
			</div>
		</div>
	</body>
</html>

Demo4

效果图如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#d1 {
				/* 设置父级元素d1为flex弹性布局 */
				display: flex;
				/* 设置名为d1的div中的内容两端对齐 */
				justify-content: space-between;
			}
			#d1 h2 {
				color: #929292;
			}
			#d1 p span {
				color: #16B8C7;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<h2>热点新闻</h2>
			<p>共有数据<span>5</span>条</p>
		</div>
	</body>
</html>

Demo5

浏览器效果图如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo</title>
		<style type="text/css">
			#table table,
			#table table th {
				/* 设置让表格行内容居中显示 */
				text-align: center;
			}

			#table table p {
				/* 设置p元素的宽度为200px */
				width: 200px;
				/* 不换行 */
				white-space: nowrap;
				/* 设置文本超出部分隐藏 */
				overflow: hidden;
				/* 设置文本超出部分用...替代 */
				text-overflow: ellipsis;
			}

			#table table .t1 {
				/* 设置class为t1的td元素内容居左显示 */
				text-align: left;
			}

			#table table .t1 p {
				/* 使p元素变成行内块级元素 */
				display: inline-block;
				/* 将外边距设置为0 */
				margin: 0;
				line-height: 15px;
			}
		</style>
	</head>
	<body>
		<div id="table">
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>备注</th>
				</tr>
				<tr>
					<td>1</td>
					<td>玄易子</td>
					<td class="t1">
						<p>已有的事，后必再有；已行的事，后必再行。</p><button>详情</button>
					</td>
				</tr>
				<tr>
					<td>2</td>
					<td>夜凌云</td>
					<td class="t1">
						<p>在强者的眼里，没有弱者的席位。</p><button>详情</button>
					</td>
				</tr>
				<tr>
					<td>3</td>
					<td>天羽</td>
					<td class="t1">
						<p>天堂和地狱没有我选择的权力，只有我被选择的命运。</p><button>详情</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Demo6

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>http://www.gxaedu.com</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        img{
            width: 200px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg" alt="">
        <span>居中</span>
    </div>
</body>
</html>