1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
17 18
44 闲置真心送 45 闲散而真诚的礼物
48 拼车顺风车 49 拼车和搭便车
52 宠物赠送 53 51
52宠物礼物53
56 找人寻物 57 找人找东西
60 技能交换 61 59
60技能交换61
64 找室友合租 65 63
64找个室友合租65
一表人才70好看 | 92卑躬屈膝 | 93卑躬屈膝 | 94卑躬屈膝 | 95卑躬屈膝 | 100卑躬屈膝 | 101卑躬屈膝 | 102 103 104 105好看106卑躬屈膝 | 107卑躬屈膝 | 108卑躬屈膝 | 109 110 111 112好看113卑躬屈膝 | 114卑躬屈膝 | 115卑躬屈膝 | 116 117 118 119好看120卑躬屈膝 | 121卑躬屈膝 | 122卑躬屈膝 | 123 124 125 126好看127卑躬屈膝 | 128卑躬屈膝 | 129卑躬屈膝 | 130 131 132 133好看134卑躬屈膝 | 135卑躬屈膝 | 136卑躬屈膝 | 137 138 139 140好看141卑躬屈膝 | 142卑躬屈膝 | 143卑躬屈膝 | 144 145 146 147好看148卑躬屈膝 | 149卑躬屈膝 | 150卑躬屈膝 | 151 152 153 154好看155卑躬屈膝 | 156卑躬屈膝 | 157卑躬屈膝 | 158 159 160 161好看162卑躬屈膝 | 163卑躬屈膝 | 164卑躬屈膝 | 165 166
1 body{ 2 margin: 0 auto; 3 border:1px solid gainsboro; 4 width: auto; 5 } 6 7 a:link{ 8 text-decoration: none; 9 color: black; 10 font-size: 14px;/*为什么都是14px 表格里的比其他地方的字体小???*/ 11 }/*未放鼠标*//*要设置字体颜色去相应的地方设定 (在全局设为什么不管用???)*/ 12 13 a:hover{ 14 text-decoration: underline; 15 color: black; 16 }/*鼠标放在上面*/ 17 /* a:link { text-decoration: none;color: blue} 18 a:active { text-decoration:blink} 19 a:hover { text-decoration:underline;color: red} 20 a:visited { text-decoration: none;color: green} 21 其中: 22 a:link 指正常的未被访问过的链接; 23 a:active 指正在点的链接; 24 a:hover 指鼠标在链接上; 25 a:visited 指已经访问过的链接; 26 text-decoration是文字修饰效果的意思; 27 none参数表示超链接文字不显示下划线; 28 underline参数表示超链接的文字有下划线*/ 29 30 ul{ 31 list-style-type: none; 32 } 33 34 .line1{ 35 height: 115px; 36 background-color:#EEEFF1; 37 border: solid 2px #DEDEDE; 38 } 39 40 .line1 div{ 41 float: left; 42 height: 115px; 43 } 44 45 .topsearch{ 46 width: 553px; 47 } 48 49 .topsearch input{ 50 margin: 30px 50px 0px 150px; 51 } 52 53 .topsearch ul li{ 54 float: left; 55 border-right: solid 2px #999999; 56 } 57 58 .topbutton ul{ 59 margin: 30px; 60 } 61 62 .topbutton a{ 63 color: #999999; 64 text-align: center; 65 } 66 67 .button{ 68 height: 45px; 69 width: 180px; 70 background-color: #FF4466; 71 border: none; 72 color: white; 73 } 74 75 .line234{ 76 background-color: #EEEFF1; 77 height: 1090px; 78 padding: 26px 67px 55px 77px; 79 } 80 81 .special{ 82 background-color: white; 83 width: 223px; 84 height: 500px; 85 float: left; 86 margin: 0 21px 0 0; 87 /*border: solid 1px #DEDEDE;*//*为什么加border格子就乱了?????*/ 88 } 89 90 .special span img{ 91 width: 223px; 92 } 93 94 .sixul{ 95 padding: 0 15px; 96 } 97 98 .sixul li{ 99 margin: 10px 0 0 0;100 float: left;101 }/*ul内边距为零 li外边距为0 可有效去除ul自带的左边距*/102 103 .sixul li img {104 width: 96px;105 height: 44px;106 margin-bottom:5px;107 }108 109 .sixul li a{110 text-align: end;/*???为什么不居中*/111 color: black;112 }113 114 115 .threepictures{116 padding: 0 15px 0 15px;117 position: relative;118 float: left;119 }120 121 .threepictures li{122 float: left;123 }124 125 #righttop{126 position: absolute;127 left: 146px;128 top: 0;129 }130 131 .person{132 background-color: white;133 width: 465px;134 height: 500px;135 float: left;136 }137 138 .person span img{139 width: 465px;140 }141 142 .person table{143 margin-left: 30px;144 align-items: center;/*为什么不管用????*/145 border: 1px red;/*为什么不管用????*/146 width:436px;147 height:396px;148 }149 150 .person table a{151 color: black;152 }153 154 .convenient{155 background-color: chartreuse;156 width: 223px;157 height: 260px;158 float: left;159 margin: 24px 21px 0 0;160 }161 162 .convenient img{163 width: 223px;164 height: 260px;165 }166 167 .tool{168 background-color: black;169 width: 954px;170 height: 260px;171 float: left;172 margin: 24px 0 0 0;173 }174 175 .wechat{176 background-color: green;177 width: 470px;178 height: 260px;179 float: left;180 margin: 24px 0 0 0;181 }182 183 .wechat img{184 width: 470px;185 height: 260px;186 }187 188 .line5{189 background-color:#EEEFF1;190 height: 235px;191 border: solid 2px #DEDEDE;192 /*padding:85px 0 0 0;*/193 }194 195 .botoom{196 height: 150px;197 width: 1350px;198 float: left;199 margin-top: 86px;200 }201 /*???????202 给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,遇到此问题203 1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)204 2、为父元素添加overflow:hidden;样式即可(完美)205 3、为父元素或者子元素声明浮动(float:left;可用)206 4、为父元素添加border(border:1px solid transparent可用)207 5、为父元素或者子元素声明绝对定位208 */209 210 .botoom img{211 height: 150px;212 width: 1350px;213 } 1正文{ 2边距:0自动;3边框:1px实心gainsboro4宽度:自动;5 } 6 7 a:link{ 8 text-decoration:无;9颜色:黑色;10字号:14px/*为什么14px表格中的字体比其他地方的字体小???*/ 11 }/*无鼠标*/*设置字体颜色到相应的地方(全局设置有什么不行的???)*/12 13a:hover { 14 text-decoration:下划线;15色:黑色;16 }/*鼠标在上面*/17/* a:link { text-decoration:none;颜色:蓝色} 18 a:主动{ text-decoration:blink} 19 a:悬停{ text-decoration:下划线;颜色:红色} 20 a:参观过{ text-decoration:无;颜色:绿色} 21其中:22 a:链接是指没有访问过的正常链接;23 a:active指的是被点击的链接;24 a:悬停表示鼠标在链接上;25答:访问过的是指已经访问过的链接;26文字修饰是指文字修改的效果;27 none参数指示超链接文本不显示下划线;28 underline参数表示超链接的文本带下划线*/29 30 ul { 31 list-style-type:none;32 } 33 34 .line1{ 35身高:115px36背景色:# EEEFF137边框:实心2px # DEDEDE38 } 39 40 . line 1 div { 41 float:left;42身高:115px43 } 44 45 .top search { 46 width:553 px;47 } 48 49 .topsearch输入{ 50 margin:30px 50px 0px 150 px;51 } 52 53 .top search ul Li { 54 float:left;55 border-right:solid 2px # 999999;56 } 57 58 .top button ul { 59 margin:30px;60 } 61 62 .top button a { 63 color:# 999999;64文本对齐:居中;65 } 66 67 .button{ 68高度:45px69宽度:180px70背景色:# FF446671边框:无;72颜色:白色;73 } 74 75 . line 234 { 76 background-color:# eee f1;77身高:1090px78填充:26px 67px 55px 77px79 } 80 81 .特殊{ 82背景色:白色;83宽度:223px84身高:500px85浮动:左;86保证金:0 21px 087/*边框:实心1px # DEDEDE*//*为什么加边框网格会很乱?????*/ 88 } 89 90 .特殊跨度img{ 91宽度:223px92 } 93 94 .six ul { 95 padding:0 15px;96 } 97 98 .sixul Li { 99 margin:10px 0 0;100浮动:左;101 }/* ul的内边距为零,ul的外边距为零,可以有效去除UL的左边距*/102 103。六李img {104宽度:96px105身高:44px106边距-底部:5px107 }108 109 .sixul阿利{ 110 text-align:end;/*???为什么不是center */111颜色:黑色;112 }113 114 115 .三幅画{116填充:0 15px 0 15px117位置:相对;118浮动:左;119 }120 121 .三图李{122浮:左;123 } 124 125 # right top { 126 position:绝对;127左:146px128顶:0;129 }130 131 .person{132背景色:白色;133宽度:465px134身高:500px135浮动:左;136 }137 138 .人跨img{139宽度:465px140 }141 142 .人员表{143左边距:30px144 align-items:居中;/*为什么不行????*/145边框:1px红色;/*为什么不行????*/146宽度:436px147身高:396px148 }149 150 .人桌a{151颜色:黑色;152 }153 154 .方便{155背景色:黄绿色;156宽度:223px157身高:260px158浮动:左;159保证金:24px 21px 0 0160 }161 162 .方便img{163宽度:223px164身高:260px165 }166 167 .tool{168背景色:黑色;169宽度:954px170身高:260px171浮动:左;172保证金:24px 0 0173 }174 175 .微信{176背景色:绿色;177宽度:470px178身高:260px179浮动:左;180保证金:24px 0 0181 }182 183 .微信img{184宽度:470px185身高:260px186 } 187 188 . line 5 { 189 background-color:# ee eff 1;190身高:235px191边框:实心2px # DEDEDE192/*填充:85px 0 0*/193 }194 195 .botoom{196身高:150px197宽度:1350px198浮动:左;199 margin-top:86px;200 }201 /*???????202给子元素框一个垂直的margin-top,父元素框也会随着margin-top的值向下。遇到这个问题的时候,203 1。修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)204 2。添加溢出:隐藏;对于父元素;风格可以(完美)205 3。声明float(float:left;;可用)206 4。为父元素207 5添加边框(边框:1px纯色透明可用)。为父元素或子元素声明绝对定位。Botoom img {211身高:150px212宽度:1350px213 }
这是我第一次用div+css编程模式写html静态网页。由于时间原因没有完全做到,但是收获很大,包括掌握的技术和发现的问题。
掌握的技术可以总结为两点:1。用浮动技术和盒子模型初步掌握网页的布局。2.初步掌握父子选择器等选择器的使用。
发现了很多没有回答的问题:大部分都在备注里做了标记,下周有机会尽快解答。
欢迎大家帮忙解惑,提建议,交流。
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 在Adminjs.cn中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!