大佬教程收集整理的这篇文章主要介绍了如何使 flexbox 和 DIV 适用于带侧边栏和不带侧边栏的 HTML 汽车销售模板?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个 HTML 模板,它通常可以满足我的需要(二手车销售平台);这使用了 flexBox。
我有三种不同的模板,一种是独立设计,另两种是相同代码库的相似版本:
body {
Font-family: Helvetica,sans-serif;
Font-size: 16px;
line-height: 18px;
}
header {
margin-left: 20px;
height: auto;
wIDth: 600px;
padding: 40px;
color: white;
BACkground-color: black;
margin-bottom: 12px;
}
.sIDebar {
BACkground-color: yellow;
float: left;
wIDth: 100px;
height: 400px;
}
.content {
margin-left: 80px;
}
article.at1 {
border: 3px solID;
wIDth: 800px;
}
.at1 {
margin-bottom: 20px;
}
.container {
display: grID;
grID-template-columns: 700px 30px;
grID-gap: -1rem;
BACkground-color: blue;
color: white;
margin-bottom: 10px;
}
.container2 {
display: grID;
grID-template-columns: 300px 300px;
grID-gap: 3rem;
}
.container2>div:nth-child(1) {
wIDth: 90px;
margin-left: 30px;
}
.container2>div:nth-child(2) {
margin-right: 70px;
wIDth: 460px;
}
.container2>div img {
display: inline-block;
wIDth: 300px;
margin-right: 30px;
}
.container:nth-child(2) {
float: right;
wIDth: 60%;
}
.container2:nth-child(2) {
wIDth: auto;
}
.price {
wIDth: 50px;
}
<body>
<header>
<H1>USED CARS OF LEEDS</H1>
<h2>north Street,Leeds LS2</h2>
</header>
<div class="sIDebar">
Menu
</div>
<div class="content">
<article class="at1">
<div class="container">
<div>
2008 58 FORD MONDEO 2.3 ZETEC 5dr
</div>
<div class="price">
£6,995
</div>
</div>
<div class="container2">
<div><img src="https://d1ix0byejyn2u7.cloudfront.net/drive/images/made/drive/images/remote/https_ssl.caranddriving.com/f2/images/used/big/fordmondeo%202007-10_750_500_70.jpg"></div>
<div>
Silver,this example is in good condtion for its age!
</div>
</div>
</article>
<article class="at1">
<div class="container">
<div>
2003 53 LAND ROVER FREELANDER 1.8i 5dr
</div>
<div class="price">
£6,995
</div>
</div>
<div class="container2">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/2002-2003_Land_Rover_Freelander.jpg/1280px-2002-2003_Land_Rover_Freelander.jpg"></div>
<div>
blue,good condition
</div>
</div>
</article>
<article class="at1">
<div class="container">
<div>
1989 G FORD IVECOCARGO EUROCARGO DROPSIDE PICKUP 4.3 TURBODIESEL 2dr 6.4t
</div>
<div class="price">
£2,995
</div>
</div>
<div class="container2">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/1999_Iveco-Ford_Cargo_75E15_5.9.jpg/1024px-1999_Iveco-Ford_Cargo_75E15_5.9.jpg"></div>
<div>
white,100,000 km
</div>
</div>
</article>
</div>
</body>
</HTML>
代码可以正常工作,但我通过添加 webFonts 使它更美观。
然而,主要问题与两件事有关 - 让侧边栏正常工作并有足够的空间,并确保侧边栏和 div.content 的内容之间有空间。
这是我设计的第二个模板,它也使用了 flexBox,但方式略有不同(颜色不会是生产版本中的颜色)。
代码按预期工作(flexBox 显示),但两个主要问题是让一切都合适。
版本 1(文章标签内的三列 flex):
HTML {
Font-family: sans-serif;
}
body {
margin: 0;
}
header {
BACkground: purple;
height: auto;
padding: 20px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 0px;
BACkground: #FFFFFF;
}
/* Add your flexBox CSS below here */
section {
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
article {
wIDth: 700px;
}
article.imageBox img {
wIDth: 230px;
}
article.price {
text-align: right;
float: right;
}
.infog > article {
BACkground-color: #FFFFFF;
}
.sIDebar {
wIDth: 200px;
height: 600px;
padding: 20px;
BACkground-color: yellow;
float: left;
margin-right: 30px;
}
div.content {
margin-right: 300px;
height: 600px;
wIDth: 800px;
padding: 20px;
margin-left: 20px;
}
<body>
<header>
<h1>Leeds Used Cars</h1>
<h2>northgate Street,Leeds</h2>
</header>
<div class="sIDebar">
Content coming
</div>
<div class="content">
<section>
<article class="imageBox">
<img src="https://parkers-images.bauersecure.com/gallery-image/pagefiles/265121/1752x1168/02-mercedes-sprinter-13.jpg">
</article>
<article>
<h3>2014 64 Mercedes-Benz Sprinter 313CDI High Roof Panel Van</h3>
<p>Silver,70,000 miles
</article>
<article>
<h3>£19,000</h3>
</article>
</section>
<section>
<article class="imageBox">
<img src="https://parkers-images.bauersecure.com/gallery-image/pagefiles/201064/static-exterior/1752x1168/astra_3.jpg">
</article>
<article>
<h3>2007 57 Vauxhall Astra 1.8 VVT life 5dr</h3>
<p>Silver,170,000 miles
</article>
<article>
<h3>£1,300</h3>
</article>
</section>
</div>
</body>
我也有此模板的替代版本,其中产品说明位于文章标签上方:
HTML {
Font-family: sans-serif;
}
body {
margin: 0;
}
header {
BACkground: purple;
height: auto;
padding: 20px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 0px;
BACkground: aqua;
}
/* Add your flexBox CSS below here */
section {
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
article {
wIDth: 700px;
}
article.imageBox img {
height: 260px;
}
article.price {
text-align: right;
float: right;
}
.infog > article {
BACkground-color: #FFFFFF;
}
.sIDebar {
wIDth: 200px;
height: 600px;
padding: 20px;
BACkground-color: yellow;
float: left;
margin-right: 30px;
}
div.content {
margin-right: 300px;
height: 600px;
wIDth: 800px;
padding: 20px;
margin-left: 20px;
}
<body>
<header>
<h1>Leeds Car Centre</h1>
<h2>northgate Street,Leeds</h2>
</header>
<div class="sIDebar">
owl
</div>
<div class="content">
<section>
<article>
<h2>2021 Compass Camino 660 </h2>
</article>
<article class="price">
<h2>£23,000</h2>
</article>
</section>
<section class="infog">
<article class="imageBox">
<img src="https://wgp-cdn.co.uk/OAL/jpg/Camino-660-F_25CMS-47523/500/500/">
</article>
<article>
4 berth,twin axle caravan,new
</article>
</section>
<section>
<article>
<h2>1989 G Porsche 911 </h2>
</article>
<article class="price">
<h2>£23,000</h2>
</article>
</section>
<section class="infog">
<article class="imageBox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Porsche_911_%28964%29_Turbo_%2810317085456%29.jpg/1024px-Porsche_911_%28964%29_Turbo_%2810317085456%29.jpg">
</article>
<article>
black,good condition,a classic
</article>
</section>
</body>
通过这三个,我想做出四个主要的改变:
让他们看起来更专业
确保侧边栏之间有足够的空间
确保弹性盒正常工作
有一个没有侧边栏的版本
这是最重要的四件事。
我正在寻求对这些基本模板的建设性批评,以了解如何在公开发布之前改进它们并使它们更加专业。
欢迎提出任何建设性的批评或代码改进。
我希望做的是使用户界面易于使用;这是一个 HTML 沙盒测试版本,尚未准备就绪。
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)
以上是大佬教程为你收集整理的如何使 flexbox 和 DIV 适用于带侧边栏和不带侧边栏的 HTML 汽车销售模板?全部内容,希望文章能够帮你解决如何使 flexbox 和 DIV 适用于带侧边栏和不带侧边栏的 HTML 汽车销售模板?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。