首页 > 其他分享 >HTML-CSS练习2

HTML-CSS练习2

时间:2024-07-01 23:30:20浏览次数:22  
标签:width 练习 height padding ul 1px HTML border CSS

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
/*
          #box ul {
             width: 500px;
             height: 100px;
             list-style: none;
             border: 1px solid gray;
                padding: 0;

          }
          #box ul img{
             float: left;
             width: 82px;
             height: 82px;
             border: 1px solid gray;
             padding: 2px;
             margin: 6px
          }
*/
/* 参考答案       */
          ul {list-style: none; padding: 0;}

          ul {
             width: 500px;
             height: 100px;
             border: 1px solid gray;

          }

          ul li {
             float: left;
             width: 70px;
             height: 70px;
             border: 1px solid gray;
             padding: 5px;
             margin: 9px;
          }

          ul li img {
             width: 100%;
             height: 100%;
          }










       </style>
    </head>
    <body>

       <div id="box">

          <ul>
             <li><img src="a.png" /></li>
             <li><img src="a.png" /></li>
             <li><img src="a.png" /></li>
             <li><img src="a.png" /></li>
             <li><img src="a.png" /></li>
          </ul>

       </div>

    </body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
/*
			#box ul {
				width: 500px;
				height: 100px;
				list-style: none;
				border: 1px solid gray;
            	padding: 0;

			}
			#box ul img{
				float: left;
				width: 82px;
				height: 82px;
				border: 1px solid gray;
				padding: 2px;
				margin: 6px
			}
*/
/* 参考答案			*/
			ul {list-style: none; padding: 0;}

			ul {
				width: 500px;
				height: 100px;
				border: 1px solid gray;

			}

			ul li {
				float: left;
				width: 70px;
				height: 70px;
				border: 1px solid gray;
				padding: 5px;
				margin: 9px;
			}

			ul li img {
				width: 100%;
				height: 100%;
			}










		</style>
	</head>
	<body>

		<div id="box">

			<ul>
				<li><img src="a.png" /></li>
				<li><img src="a.png" /></li>
				<li><img src="a.png" /></li>
				<li><img src="a.png" /></li>
				<li><img src="a.png" /></li>
			</ul>

		</div>

	</body>
</html>

标签:width,练习,height,padding,ul,1px,HTML,border,CSS
From: https://blog.csdn.net/m0_61566562/article/details/140072332

相关文章

  • 5、爬虫-数据的提取-xpath-html中提取
    从哪里提取:html、json、xml实现方式:正则、截取、xpath、css、bs4 这里使用xpath工具:  ·安装:pipinstalllxml """使用xpath工具提取网页中视频的标题"""importrequestsfromlxmlimportetree#使用xpathheaders={"User-Agent":"Mozilla/5.0......
  • 动手学深度学习5.6 GPU-笔记&练习(PyTorch)
    以下内容为结合李沐老师的课程和教材补充的学习笔记,以及对课后练习的一些思考,自留回顾,也供同学之人交流参考。本节课程地址:17使用和购买GPU【动手学深度学习v2】_哔哩哔哩_bilibili本节教材地址:5.6.GPU—动手学深度学习2.0.0documentation(d2l.ai)本节开源代码:...>d......
  • 7.半加器拓展练习:使用与非门实现半加器
    使用always语句实现半加器:(1)报错:[HDL9-806]Syntaxerrornear"non-printablecharacterwiththehexvalue'0xef'". 原因:Verilog中带有中文字符(2)Verilog代码:moduleex_half_adder(A,B,Cout,Sum);inputA;inputB;outputregCout;......
  • HTML入门词典
    认识HTML标签格式HTML全称为“超文本标记语言”,通过标签对文字图像等页面元素设置格式。创建一个新元素的方法为:开标签(开始):<...(标签类型及其他内容)>元素内容:……闭标签(结束):</...(标签类型,与开始标签相同)>如使用div标签声明一段文字:<div>HelloWorld!</div>......
  • [CSS] @scope
    Video:https://www.youtube.com/watch?v=PkFuytYVqI8&list=WL&index=67 body└─article.feature├─section.article-hero│├─h2│└─img│├─section.article-body│├─h3│├─p│├─img│├─p│......
  • [CSS] Scroll animation: scroll-snap
    Video:https://www.youtube.com/watch?v=zqjKE_zcWzE&list=WL&index=68&t=14scode:https://github.com/Alliemack77/scroll-animations-with-css-only/*Customprops*/:root{--transition-250-ease-in:250msease-in;}/*Reset*/*::after,*:......
  • HTML5+CSS3集训(16)
    图片布局案例实践 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>p155</title></head><body><ul><li><imgsrc="巧克力.jpg......
  • HTML5+CSS3集训(15)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>*{margin:0;padding:0;}.q1{border:1pxsolidblack;bac......
  • HTML5+CSS3集训(14)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>p180</title></head><body><divclass="container"><divclass="top"......
  • 中文翻译老挝语只推荐一个神器《老挝语翻译通》App,老挝语口语发音练习,支持老挝文OCR识
    出国旅游去探索东南亚的神秘国家:老挝,不会老挝语怎么办?不用怕,下载《老挝语翻译通》App帮助你把中文翻译成老挝语。功能亮点:实时翻译:实时把中文翻译成老挝语,老挝语单词或者句子均可均可准确翻译。语音识别翻译:无需打字,对着说话就能翻译,老挝语实时对话,流畅交流。OCR文字识别:......