zoukankan html css js c++ java

5月23日格式与布局练习：汽车之家网站

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="Untitled-1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
<div class="a9"></div>
<div class="a10"></div>
<div class="a11"></div>
<div class="a12"></div>
<div class="a13"></div>
<div class="a14"></div>
<div class="a15"></div>
<div class="a16"></div>
<div class="a17"></div>
<div class="a18"></div>
<div class="a19"></div>
<div class="a20"></div>
<div class="a21"></div>
<div class="a22"></div>
<div class="a23"></div>
<div class="a24"></div>
<div class="a25"></div>
<div class="a26"></div>
<div class="a27"></div>
<div class="a28"></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*
{
    margin:0px;
    padding:0px;}
.a1
{
    width:100%;
    height:30px;
    left:0%;
    top:0px;
    border:1px solid #000;
    background-color:#000;
    position:absolute;}
.a2
{
    width:100%;
    height:30px;
    left:0%;
    top:30px;
    border:1px solid #000;
    background-color:#039;
    position:absolute;}
.a3
{
    width:100%;
    height:50px;
    left:0%;
    top:60px;
    border:1px solid #000;
    background-color:#CCC;
    position:absolute;}
.a4
{
    width:60%;
    height:90px;
    left:10%;
    top:120px;
    border:1px solid #000;
    background-color:#3CF;
    position:absolute;}
.a5
{
    width:19%;
    height:90px;
    left:71%;
    top:120px;
    border:1px solid #000;
    background-color:#03F;
    position:absolute;}    
.a6
{
    width:10%;
    height:85px;
    left:10%;
    top:25px;
    border:1px solid #000;
    background-color:#FFF;
    position:absolute;}    
.a7
{
    width:80%;
    height:50px;
    left:10%;
    top:220px;
    border:1px solid #000;
    background-image:url(jianbianse.jpg);
    background-repeat:repeat-y;
    position:absolute;}    
.a8
{
    width:39.5%;
    height:30px;
    left:10%;
    top:290px;
    border:1px solid #039;
    position:absolute;}    
.a9
{
    width:29.5%;
    height:30px;
    left:51%;
    top:290px;
    border:1px solid #F60;
    position:absolute;}    
.a10
{
    width:8%;
    height:30px;
    left:82%;
    top:290px;
    border:1px solid #000;
    position:absolute;}        
.a11
{
    width:80%;
    height:150px;
    left:10%;
    top:320px;
    border:1px solid #000;
    position:absolute;}    
.a12
{
    width:80%;
    height:50px;
    left:10%;
    top:470px;
    border:1px solid #000;
    position:absolute;}    
.a13
{
    width:80%;
    height:50px;
    left:10%;
    top:530px;
    border:1px solid #000;
    position:absolute;}    
.a14
{
    width:30%;
    height:310px;
    left:10%;
    top:590px;
    border:1px solid #000;
    position:absolute;}    
.a15
{
    width:30%;
    height:70px;
    left:10%;
    top:910px;
    border:1px solid #000;
    position:absolute;}    
.a16
{
    width:30%;
    height:70px;
    left:10%;
    top:990px;
    border:1px solid #000;
    position:absolute;}    
.a17
{
    width:30%;
    height:600px;
    left:10%;
    top:1070px;
    border:1px solid #000;
    position:absolute;}    
.a18
{
    width:30%;
    height:160px;
    left:10%;
    top:1680px;
    border:1px solid #000;
    position:absolute;}    
.a19
{
    width:30%;
    height:160px;
    left:10%;
    top:1850px;
    border:1px solid #000;
    position:absolute;}    
.a20
{
    width:30%;
    height:1420px;
    left:41%;
    top:590px;
    border:1px solid #000;
    position:absolute;}    
.a21
{
    width:18%;
    height:220px;
    left:72%;
    top:590px;
    border:1px solid #000;
    position:absolute;}    
.a22
{
    width:18%;
    height:300px;
    left:72%;
    top:820px;
    border:1px solid #000;
    position:absolute;}    
.a23
{
    width:18%;
    height:150px;
    left:72%;
    top:1130px;
    border:1px solid #000;
    position:absolute;}        
.a24
{
    width:18%;
    height:150px;
    left:72%;
    top:1290px;
    border:1px solid #000;
    position:absolute;}    
.a25
{
    width:18%;
    height:500px;
    left:72%;
    top:1450px;
    border:1px solid #000;
    position:absolute;}    
.a26
{
    width:18%;
    height:50px;
    left:72%;
    top:1960px;
    border:1px solid #000;
    position:absolute;}    
.a27
{
    width:80%;
    height:70px;
    left:10%;
    top:2020px;
    border:1px solid #000;
    position:absolute;}    
.a28
{
    width:8%;
    height:150px;
    left:91%;
    top:230px;
    border:1px solid #000;
    right:10px;
    bottom:300px;    
    position:fixed;}/*最边上的二维码图，锁定相对于浏览器的位置，页面滚动位置也不变*/

查看全文

相关阅读:
mysql 8.x 忘记密码
 sqlite
公租房查询记录
 idea 常用快捷键总结
 vue h5项目中上传图片时保存之后显示不全
 微信小程序开发中使用npm命令快速添加页面
 【Luogu7816】「Stoi2032」以父之名
 【XSY3657】因数分解
 Min_25筛学习笔记
 拉格朗日反演学习笔记

原文地址：https://www.cnblogs.com/juyangchao12/p/5525384.html

5月23日 格式与布局练习：汽车之家网站

5月23日格式与布局练习：汽车之家网站