html实战之一(利用html+css做一个静态页面)_css+html制作讨论社区页面_狂奔的CD的博客-程序员秘密

技术标签: web  

参照一般博客的样子,做了个超简易版,先秀一下样子

html1html1

很明显主体部分是三个模块,顶部左侧和右侧div

写的过程中客服的几个问题:


1.参照了w3school的样子,固定主体宽度,调整浏览器时,保持最小宽度
html {
   width: 966px;
   background-color: #f9f9f9;
   margin: 0px auto;    //整体居中
  /* overflow: scroll;
   overflow-x: hidden;*/
  
}


2.顶部图片是个链接,并且撑到了最大
<div id="header_index">
<a href="index.html" title="w3school 在线教程">
<img src="http://img5.imgtn.bdimg.com/it/u=2769827889,3349501200&fm=21&gp=0.jpg" width="100%">
</a>
</div> 


3.左侧div的'我的分类'下部分是一个ul,这里css也调了好久,才打到w3school的类似对齐效果。做以下几个工作:

<div id="kind" >   
<h2>我的分类</h2>
<ul style="list-style:none">
<li><a href="index.html" title="文章">文章</a></li>
                <li><a href="imagescan.html" title="图片浏览">图片浏览</a></li>
<li><a href="index.html" title="分类3">分类3</a></li>
<li><a href="index.html" title="分类4">分类4</a></li>
<li><a href="index.html" title="分类5">分类5</a></li>
<li><a href="index.html" title="分类6">分类6</a></li>
<li><a href="index.html" title="分类7">分类7</a></li>
<li><a href="index.html" title="分类8">分类8</a></li>
<li><a href="index.html" title="分类9">分类9</a></li>
</ul>
</div>

//样式

去边距空格,不懂得可以打开chrome浏览器的开发者工具,看看右下角的这个图


*
{
margin:0;
padding:0;
border:0;
}


ul去掉点 <ul style="list-style-type:none">


li链接项设置样式  a:link代表未访问过链接   a:visited代表访问过的链接

a:link,a:visited {
    text-decoration: none;   //无装饰
    color: #000;
  background: transparent;
   


设置行高字体等

li{

font-family: Verdana, Arial, '宋体';
line-height: 21px;
font-size: 15px;
margin: 0;
padding: 0;
text-align: left;
}


4.正文部分不说了,就是左侧和右侧要设定宽,然后要在同一层,设置float得一起,不然可能很奇怪

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/kkae8643150/article/details/52452874

智能推荐

CRC8校验_crc8校验码_doufuxian的博客-程序员秘密

CRC按照位直接计算,比较灵活可以修改生成多项式  unsigned char CFrameInput::GetCheckSum(unsigned char *crcData, int crcDataLen)  {  "white-space:pre">  unsigned char crcPoly = 0x07; // 生成多项式  "white-space:pre">  uns

释放linux缓存_weixin_34075551的博客-程序员秘密

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

【jvm】使用命令行jmap手工触发fullGC_jmap会触发full gc嘛_skiof007的博客-程序员秘密

使用了jmap工具实现,手工触发fullGC,运维常备jmap -histo:live &lt;pid&gt;或者jmap -dump:live,file=dump_001.bin PID然后删掉dump_001.bin文件

58 同城 iOS 客户端 Hybrid 框架探索_zhuweideng的博客-程序员秘密

https://mp.weixin.qq.com/s?__biz=MzA4MzEwOTkyMQ==&mid=2667378880&idx=1&sn=223723483dd99e50118bae762a4e67b8&chksm=84f3298eb384a098ce49121918f50d8edca89ca88bf9006c69faff550be7f03fbd68020701ac&scene=0&ke

fis3前端工程构建配置总结_世态炎凉!!的博客-程序员秘密

憋了好久,还是决定写下这篇博客,fis3是自动化的构建工具而已,它的构建不会修改源码,而是会通过用户设置,将构建结果输出到指定的目录。下面我们来谈下怎么配置fis3的(怎么安装这里就不说了)1.fis3工作流程FIS3 是基于文件对象进行构建的,每个进入 FIS3 的文件都会实例化成一个 File 对象,整个构建过程都对这个对象进行操作完成构建任务。整个 FIS3 的构建流程大体概括分为三个...

在vue脚手架运用vuex(状态管理器)+ 登录后用户名的保存_QQ帝国的博客-程序员秘密

1、安装vuex,           命令:npm i vuex -D2、在src文件里新建一个store文件夹,然后 创建store.js文件,        在store.js里引入vue   ,vuex  如下import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex)import state from '...

随便推点

C#获取Json文件的树节点_循环动态json以获取所有节点c#__速冻的博客-程序员秘密

using System;using System.Web;using Newtonsoft.Json;using Newtonsoft.Json.Linq;using Newtonsoft;using System.IO;using System.Collections.Generic;using System.Data;using Newtonsoft.Json.Converters; string json = @"{ 'CPU': 'Intel', .

react tab切换 第一次切换到某个页面时会请求数据,以后不会再请求数据_徐同保-ChatGPT第三方应用开发者的博客-程序员秘密

目录结构:App.js:import React, { Component } from 'react'import { connect } from 'react-redux'import Fruits from './Fruits/Fruits.js'import Phone from './Phone/Phone.js'import './App.css'...

终于搞懂了Java8的内存结构,再也不纠结方法区和常量池了!_程序员小乐的博客-程序员秘密

点击上方 &#34;编程技术圈&#34;关注,星标或置顶一起成长后台回复“大礼包”有惊喜礼包!每日英文Sometimes, people cry not because they&#39...

计算机专业毕业论文指导记录详细,毕业论文指导记录怎么写 了解一下_PlutoAu的博客-程序员秘密

1、指导记录总共6次,请各位同学按照法学院网站上公布的毕业论文写作进度确定每次指导记录的时间。同时根据自己的论文选题和实际情况,可稍作调整。2、第一次:根据学院的统一部署,布置学生毕业论文写作的总体要求与进度,要求学生严格按照学院的部署,积极认真完成毕业论文写作任务。3、第二次:针对学生初步拟定的论文框架和开题报告,提出修改与完善的意见。4、第三次:审定学生的开题报告。完成毕业论文初稿,并就如何引...

asp.net2.0学习历程 菜鸟到中级程序员的飞跃【月儿原创】_wuliao_321的博客-程序员秘密

asp.net2.0学习历程 菜鸟到中级程序员的飞跃【月儿原创】 <imgsrc=http://blog.csdn.net/21aspnet/aggbug/1612388.aspx width=1height=1 />

何谓单调栈?leetcode单调栈题目汇总_Onwarder的博客-程序员秘密

一、单调栈 我们知道,栈是一种基本的数据结构,其最大的特点就是“先进后出”,因为栈中的元素只能在一端进行操作,所有的元素只能在栈顶进出。 普通的栈对于栈内的元素值没有任何要求。而单调栈不同,它要求栈内的元素具有单调性。 单增栈:栈内的元素从栈底到栈顶满足单调递增。 单减栈:栈内的元素从栈底到栈顶满足单调递减。 那么,单调栈有啥用呢?简单来说,单调栈在查找比当前元素更大(小)的下(前)一个元素上有奇效。二、...