简要仿简书首页

最新推荐文章于 2021-08-04 16:57:48 发布

水煮清蒸

最新推荐文章于 2021-08-04 16:57:48 发布

阅读量373

点赞数

分类专栏：好玩

本文链接：https://blog.youkuaiyun.com/qq_33296108/article/details/98405409

版权

本文档介绍了如何创建一个简书首页的简易版，包括使用`index.html`作为主要页面，结合`style.css`进行样式设计，并用阿里爸爸图标与网页元素相结合，展示了一个基本的网页布局和设计过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
<head>
	<title>简书</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="./static/style.css">
 <link rel="stylesheet" type="text/css" href="./static/icon/zuanshi/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/icon/pinglun/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/icon/aixin/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/icon/change/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/icon/add/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/icon/up-row/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/icon/write/iconfont.css">
<link rel="stylesheet" type="text/css" href="./static/icon/fangdajing/iconfont.css">
<body>
<div class="self-contain">
	<div class="self-head">
		<a href="/" class="self-logo-index"></a>
		<ul class="self-list-ul">
			<li > <a href="/">发现</a></li>
			<li > <a href="/">关注</a></li>
			<li > <a href="/">消息</a></li>	
			<div class="self-search">
				<input type="" placeholder="搜索" class="self-search-input"/>
				<a ><div class="iconfont icon-fangdajing self-search-logo"></div></a>
			</div>
		</ul>
		<div class="self-user">
			<img src="./static/avatar.jpg"/> 
			<ul class="self-dropdown-menu">
				<li><a href="">我的主页</a></li>
				<li><a href="">收藏的文章</a></li>
				<li><a href="">帮助与反馈</a></li>
				<li><a href="">设置</a></li>
				<li><a href="">退出</a></li>
			</ul>
		</div>
		
		<a href="/" class="self-button-write">
			<span class="iconfont icon-penwrite self-write"></span>
		写文章</a>
		</div>
	</div>

	<div class="container" style="padding: 56px 38px 0 38px;min-width: 910px;">
		<div class="row">
			<div class="col-xs-7 self-left">
				<div class="banner">
					  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					  <!-- Indicators -->
					  <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					  </ol>

					  <!-- Wrapper for slides -->
					  <div class="carousel-inner " role="listbox">
					    <div class="item active self-banner">
					      <img src="./static/banner1.png" class="item-img" alt="...">
					      <div class="carousel-caption">
					        
					      </div>
					    </div>
					    <div class="item self-banner">

最低0.47元/天解锁文章