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;}/*最边上的二维码图，锁定相对于浏览器的位置，页面滚动位置也不变*/

查看全文

相关阅读:
mongo admin 客户端管理工具安装
 kong API gateway
安装 docker管理工具页面 portainer
elcipse 安装lombok插件解决 @Slf4j 等找不到log变量问题
 cqrs案例
 你还不知道这四点Mysql调优的话，那就赶快学起来
 python中的类型提示(type hint)
大厂面试最常被问的Redis问题合集
 nginx gzip json [2]
nginx gzip json 配置「1」

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

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

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