知乎前端网页
模拟知乎网站制作自己的网页
科比主场
哈哈哈！
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>知乎网站title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
<style>
.container-fluid {
width: 800px;
height: 51px;
margin: auto;
color: chartreuse;
}
.form-group .btn btn-default {
background-color: blue;
}
.navbar-brand h2 {
position: relative;
bottom: 25px;
}
.nav navbar-nav l {
display: block;
}
.nav navbar-nav l:hover {
border-left: 10px solid green;
position: relative;
}
.shenti {
width: 760px;
height: 720px;
border: 1px dashed lightgray;
margin: auto;
}
.bujian {
width: 750px;
height: 720px;
background-color: white;
margin: auto;
}
.bujian1 {
position: absolute;
width: 300px;
height: 150px;
left: 1140px;
top: 50px;
background-color: skyblue;
}
.bujian2 {
position: absolute;
width: 300px;
height: 180px;
left: 1140px;
top: 220px;
background-color: white;
border:1px solid lightgray;
}
.bujian2 .b1{
width: 300px;
height: 60px;
background-color: lightpink;
border: 2px solid black;
border-top: none;
border-right: none;
border-left: none;
}
.bujian2 .b2{
width: 150px;
height: 90px;
position: absolute;
top: 60px;
left:0px;
background-color: white;
border: 1px dotted lightgray;
border-left: none;
float: left;
}
.bujian2 .b3{
width: 150px;
height: 90px;
position: absolute;
top: 60px;
left:150px;
background-color: white;
border: 1px dotted lightgray;
border-left: none;
float: left;
}
.bujian2 .b4{
width: 300px;
height: 30px;
position: absolute;
top:150px;
left:0px;
}
.bujian2 .b4 p{
margin: auto;
font-size: 15px;
font-weight: lighter;
font-family: 'Times New Roman', Times, serif;
}
.bujian2 .b2 p{
font-size: 20px;
width: 70px;
margin:auto;
}
.bujian2 .b3 p{
font-size: 20px;
width: 70px;
margin:auto;
}
.bujian3 {
position: absolute;
width: 300px;
height: 300px;
left: 1140px;
top: 450px;
border:1px solid black;
}
.bujian3 ul p{
font-size: 19px;
display: block;
list-style: none;
}
.bujian3 .c1{
width: 40px;
height: 20px;
position: absolute;
left:250px;
top:6px;
background-color: lightgray;
}
.bujian3 .c1 h5{
position: relative;
top:-7px;
left:7px;
}
.bujian3 .c2 h5{
position: relative;
top:-7px;
left:7px;
}
.bujian3 .c3 h5{
position: relative;
top:-7px;
left:7px;
}
.bujian3 .c2{
width: 40px;
height: 20px;
position: absolute;
left:250px;
top:45px;
background-color: lightgray;
}
.bujian3 .c3{
width: 40px;
height: 20px;
position: absolute;
left:250px;
top:85px;
background-color: lightgray;
}
.box1 {
widows: 750px;
height: 100px;
background-color: skyblue;
border-right: dotted lightslategray;
border-left: none;
border-right: none;
border-bottom: none;
}
.box2 {
width: 750px;
height: 100px;
background-color: skyblue;
border: 1px dotted lightslategray;
border-left: none;
border-right: none;
border-bottom: none;
}
.box3 {
width: 750px;
height: 100px;
background-color: skyblue;
border: 1px dotted lightslategray;
border-left: none;
border-right: none;
border-bottom: none;
}
.box4 {
width: 750px;
height: 100px;
background-color: skyblue;
border: 1px dotted lightslategray;
border-left: none;
border-right: none;
border-bottom: none;
}
.box5 {
width: 750px;
height: 100px;
background-color: skyblue;
border: 1px dotted lightslategray;
border-left: none;
border-right: none;
border-bottom: none;
}
.box6 {
width: 750px;
height: 100px;
background-color: skyblue;
border: 1px dotted lightslategray;
border-left: none;
border-right: none;
border-bottom: none;
}
.box7 {
width: 750px;
height: 100px;
background-color: skyblue;
border: 1px dotted lightslategray;
border-left: none;
border-right: none;
border-bottom: none;
}
.box11 {
width: 600px;
height: 100px;
float: left;
}
.box12 {
width: 150px;
height: 100px;
float: right;
position: relative;
top: 10px;
left: 20px;
}
.box21 {
width: 600px;
height: 100px;
float: left;
}
.box22 {
width: 150px;
height: 100px;
float: right;
position: relative;
top: 10px;
left: 20px;
}
.box31 {
width: 600px;
height: 100px;
float: left;
}
.box32 {
width: 150px;
height: 100px;
float: right;
position: relative;
top: 10px;
left: 20px;
}
.box41 {
width: 600px;
height: 100px;
float: left;
}
.box42 {
width: 150px;
height: 100px;
float: right;
position: relative;
top: 10px;
left: 20px;
}
.box51 {
width: 600px;
height: 100px;
float: left;
}
.box52 {
width: 150px;
height: 100px;
float: right;
position: relative;
top: 10px;
left: 20px;
}
.box61 {
width: 600px;
height: 100px;
float: left;
}
.box62 {
width: 150px;
height: 100px;
float: right;
position: relative;
top: 10px;
left: 20px;
}
.box71 {
width: 600px;
height: 100px;
float: left;
}
.box72 {
width: 150px;
height: 100px;
float: right;
position: relative;
top: 10px;
left: 20px;
}
.box21 h4 {
position: relative;
top: -10px;
font-size: 20px;
font-style: initial;
font-weight: bold;
color: black;
}
.box11 h4 {
position: relative;
top: -10px;
font-size: 20px;
font-style: initial;
font-weight: bold;
color: black;
}
.box31 h4 {
position: relative;
top: -10px;
font-size: 20px;
font-style: initial;
font-weight: bold;
color: black;
}
.box41 h4 {
position: relative;
top: -10px;
font-size: 20px;
font-style: initial;
font-weight: bold;
color: black;
}
.box51 h4 {
position: relative;
top: -10px;
font-size: 20px;
font-style: initial;
font-weight: bold;
color: black;
}
.box61 h4 {
position: relative;
top: -10px;
font-size: 20px;
font-style: initial;
font-weight: bold;
color: black;
}
.box71 h4 {
position: relative;
top: -10px;
font-size: 20px;
font-style: initial;
font-weight: bold;
color: black;
}
.box11 a {
position: relative;
top: -10px;
}
.box21 a {
position: relative;
top: -10px;
}
.box31 a {
position: relative;
top: -10px;
}
.box41 a {
position: relative;
top: -10px;
}
.box51 a {
position: relative;
top: -10px;
}
.box61 a {
position: relative;
top: -10px;
}
.box71 a {
position: relative;
top: -10px;
}
.box1 p {
color: black;
}
.hhh {
position: relative;
width: 50px;
height: 50px;
top: -50px;
left: 750px;
}
.hhh1 {
position: relative;
width: 50px;
height: 50px;
top: -45px;
left: 800px;
}
.lindang{
position: absolute;
width: 43px;
height: 50px;
top:3px;
left:1150px;
}
.photo{
position: absolute;
width: 42px;
height: 45px;
top:3px;
left:1200px;
}
.tao{
position: absolute;
width: 51px;
height: 47px;
top:3px;
left:1250px;
}
.bujian2 h4{
position: absolute;
top:8px;
left:55px;
}
style>
head>
<body>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<h2>知乎h2>
a>
div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页a>li>
<li><a href="#">发现a>li>
<li><a href="#">等你来答a>li>
<li><a href="#">热点排行a>li>
<li><a href="#">登录a>li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
div>
<button type="submit" class="btn btn-default">提问button>
form>
li>
<div class="lindang">
<img src="images/kobe5.png">
div>
<div class="photo">
<img src="images/k2.png">
div>
<div class="tao">
<img src="images/tao.png">
div>
ul>
div>
div>
div>
<div class="shenti">
<div class="bujian">
<div class="box1">
<div class="box11">
<h4>1 科比遇难h4>
<a href="https://new.qq.com/omn/20200127/20200127A033B800.html" target=_blank>
据美国媒体报道，NBA传奇巨星科比-布莱恩特在一起直升机事故中去世。
NBA球星科比·布莱恩特在当地时间周日26号早晨，北京时间昨晚坠机遇难。同时遇难的还有他13岁的女儿。
科比是在加利福尼亚州洛杉矶县卡拉巴萨斯的一场直升机坠机事故中身亡的...
a>
div>
<div class="box12">
<img src="images/kobe.jpg">
div>
div>
<div class="box2">
<div class="box21">
<h4>2 科比“手下败将”阵容：艾弗森、杜兰特上榜！霍华德被打服h4>
<a href="https://k.sina.com.cn/article_6579532191_1882bb19f001014uh0.html?from=sports&subch=nba"
target=_blank>
最近看乔丹的纪录片，令人热血沸腾，好像全世界都是乔丹的手下败将。
而科比作为乔丹继承人，他的手下败将也不少。近日知名美媒《SlamStudios》晒图：科比的“手下败将”阵容：其中艾弗森、
杜兰特均上榜，霍华德最后还是被打服了……
a>
div>
<div class="box22">
<img src="images/kobe1.jpg">
div>
div>
<div class="box3">
<div class="box31">
<h4>3 科比退役 巨星时代落幕h4>
<a href="http://news.sina.com.cn/o/2016-04-14/doc-ifxriqqv5596701.shtml" target=_blank>
2016年4月14日，科比·布莱恩特，这个后乔丹时代最伟大的篮球巨星，将退出篮球江湖。
看着他打球长大变老的人们，都在等待这个时刻最终到来...
a>
div>
<div class="box32">
<img src="images/kobe3.jpg">
div>
div>
<div class="box4">
<div class="box41">
<h4>4 科比81分的那个夜晚，究竟有多么疯狂？h4>
<a href="https://sports.sina.cn/nba/2019-12-30/detail-iihnzahk0734943.d.html?cre=wappage&loc=3&mod=r&r=9&rfunc=33&tj=none"
target=_blank>
科比在这场比赛中达到了另一种境界，他在42分钟时间内，46投28中，命中率60.9%，三分球13中7，罚球20中18。当NBA官方为这一晚制作一部叫做《真实NBA》的纪录片时，
科比再次描述了当晚的感受...
a>
div>
<div class="box42">
<img src="images/kobe2.jpg">
div>
div>
<div class="box5">
<div class="box51">
<h4>5 当年科比绝杀热火，韦德差点砸了科比的更衣室h4>
<a href="https://sports.eastday.com/a/180615014553930000000.html" target=_blank>
科比在韦德头上绝杀热火，也是科比职业生涯经典绝杀镜头之一，当时韦德被绝杀赛后对科比的原话是：嘿，哥们，也就是你，换做其他人，我早就把他的更衣室砸了，
霸气的话语里透漏着无奈与尊重，如今两大后乔丹时代最伟大的两个分卫...
a>
div>
<div class="box52">
<img src="images/kobe5.jpg">
div>
div>
<div class="box6">
<div class="box61">
<h4>6 封神演绎：科比双绝杀太阳 8号的完美谢幕h4>
<a href="https://nbachina.qq.com/a/20180717/028716.htm" target=_blank>
在守住两个主场之后，科比成功帮助湖人在首轮取得了3-1的领先优势，距离晋级仅差一步之遥。但是这一步却太过遥远
，顽强的太阳连扳三场，以4-3昂首杀入西部半决赛。而G3也成为了8号科比-布莱恩特完美的谢幕表演...
a>
div>
<div class="box62">
<img src="images/kobe6.jpg">
div>
div>
<div class="box7">
<div class="box71">
<h4>7 2010年科比夺冠，为何打绿军那么费劲？h4>
<a href="https://sports.eastday.com/a/200203180906372000000.html" target=_blank>
2010年NBA总决赛科比带领湖人队以4:3击败了凯尔特人队实现2连冠，科比也如愿以偿连庄总决赛MVP，
那么如日中天的科比为何打绿军那么费劲呢？从账面上看，那年的拜纳姆还没有烫头，已经是联盟数得着的好内线
，加索尔还处于巅峰时期，慈世平是外线大闸...
a>
div>
<div class="box72">
<img src="images/kobe7.jpg">
div>
div>
div>
<div class="bujian1">
<img src="images/kk3.png">
div>
<div class="bujian2">
<box class="b1"><img src="images/k5.png">box>
<h4>创作者中心h4>
<box class="b2">
<p>昨日被阅读数p>
<p>926p>
box>
<box class="b3">
<p>昨日获赞数p>
<p>11p>
box>
<box class="b4">
<p>瓦力保障为你的创作提供保障p>
box>
div>
<div class="bujian3">
<div class="cc">
<box class="c1">
<h5>24h5>
box>
<box class="c2">
<h5>8h5>
box>
<box class="c3">
<h5>24h5>
box>
div>
<ul>
<p><image src="images/kobe55.png"><a href="">我的收藏p>
<p><image src="images/kobe55.png">image><a href="">我关注的问题p>
<p><image src="images/kobe55.png">image><a href="">我的邀请p>
<p><image src="images/kobe55.png">image><a href="">我的余额p>
<p><image src="images/kobe55.png">image><a href="">站务中心p>
<p><image src="images/kobe55.png">image><a href="">帮助中心p>
<p><image src="images/kobe55.png">image><a href="">版权服务中心p>
ul>
div>
div>
body>
html>
`