1.提示框/箭头/透明度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body style="text-align:center;"><h2>底部提示框/顶部箭头</h2><div class="tooltip">鼠标移动到我这<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>

.tooltip{position: relative;display: inline-block;border-bottom: 1px dotted black;
}
.tooltiptext{visibility: hidden;text-align: center;background-color: black;color: white;width:120px;padding: 6px 0px;border-radius: 6px;position: absolute;z-index: 1;right: 105%;margin-top: -3px;opacity: 0;transition: opacity 2.5s;
}
.tooltiptext::after{content: "";position:absolute;border-style:solid;top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent black;
}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1;
}

2.导航栏

    *{box-sizing:border-box;      }body{margin:0;}.header{background-color:#1E90FF;text-align:center;color:white;padding:15px;}.footer{background-color:#696969;color:white;padding:10px;}.topmenu{    list-style-type:none;margin:0;padding:0;overflow:hidden;/*显示出内容。其他的会被剪辑*/background-color:#777;}.topmenu li{float:left;}.topmenu li a{display:inline-block; /* 对象为内联，内容为块级*/color:white;padding:16px;text-decoration:none;}.topmenu li a:hover{background-color:#222;}.topmenu li a.active{color:white;background-color:#32CD32}.column{float:left;padding:15px;}.clearfix:after{    /*在元素clearfix后添加内容*/content:"";clear:both;display:table;/*为一个块级表格元素 */}.sidemenu{width:25%;      }.content{width:65%;}.sidemenu ul{list-style-type:none;margin:0px;padding:0px;}.sidemenu li a{margin-bottom:4px;display:block;padding:8px;text-decoration:none;background-color:#eee;color:#666;}.sidemenu li a:hover{background-color:#555;color: white;}.sidemenu li a.active{background-color: #008CBA;color: white;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head><body><ul class="topmenu"><li><a href="#home" class="active">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li><li><a href="#about">关于我们</a></li></ul><div class="clearfix"><div class="column sidemenu"><ul><li><a href="#flight">The Flight</a></li><li><a href="#City" class="active">The City</a></li><li><a href="#island">The Island</a></li><li><a href="#Food">The Food</a></li><li><a href="#People">The People</a></li><li><a href="#History">The History</a></li><li><a href="#Oceans">The Oceans</a></li></ul>  </div><div class="column content"><div class="header"><h1>The City</h1></div><h1>Chania</h1><p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p><p>You will learn more about responsive web pages in a later chapter.</p></div></div><div class="footer"><p>底部文本</p></div>
</body>
</html>

转载于:https://www.cnblogs.com/Tony98/p/10950920.html

HTML/CSS 练习相关推荐

  1. ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题

    html && css 解决li浮动边框为2的问题 思路 问题:首先,li 浮动后,添加边框,则 中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...

  2. 【css】基础学习总结

    填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...

  3. Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss

    错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...

  4. CSS 选择器：BeautifulSoup4解析器

    和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...

  5. CSS Modules

    css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突 要使用 CSS Modules 有几个步骤,首先需要在 webpack ...

  6. css 伪元素::after与::before的使用

    CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...

  7. 前端之css基础学习（更正版）

    css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...

  8. div css 常用技巧

    div css 常用技巧 1.给图片加上alt属性:  <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...

  9. CSS单位分析及CSS颜色表示法、颜色表（调色板）

    CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...

  10. 前端之css引入方式/长度及颜色单位/常用样式

    1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

最新文章

  1. AI时代龙争虎战 什么是传统安企“护城河”？
  2. linux shell命令设置内存大小运行jar文件
  3. C++面试八股文快问快答のSTL篇
  4. php-calendar,PHPCalendar的函数简介
  5. 1120. Friend Numbers (20)-PAT甲级真题
  6. RS232串口MODBUS协议工业读写器读卡器配置软件|工具的功能与界面说明
  7. 怎么把office卸载干净？
  8. 用户画像基础之应用落地和案例展示
  9. 苹果邮箱登录入口_电子邮箱的申请及使用说明
  10. 武汉理工计算机网络教学平台,武汉理工大学 操作系统
  11. C# 将错误日志写到txt文件
  12. Java多线程+IO流+网络编程+MySQL+JDBC编程实现多人联机版坦克大战
  13. 秋意浓(2018.9.28)
  14. python下载哪一个安装包_python中正确安装对应版本的包
  15. 笔记本电脑加一个机械硬盘后的配置工作
  16. hook createmutex openmutex 实现多开
  17. Python中的面向对象编程练习
  18. 百度站长工具 加广告 代码分析
  19. water sensor水位传感器
  20. Python3: fp-growth频繁项集求解算法代码（提供py文件，可直接调用）

热门文章

  1. java 中j= i_java中 i = i++和 j = i++ 的区别
  2. Example-Based Facial Rigging
  3. visual odometry andmultiple view setting
  4. Lesson 3 Part 2 logistic regression
  5. GoogleNet_V3结构(论文复现)
  6. mysql io 100_MySQL服务器 IO 100%的案例分析
  7. python dataframe的某一列变为list_Python数据分析系列文章之Pandas(上)
  8. 光照强度曲线图android,有关光合作用的曲线图的分析（一） - xyz的日志 - 网易博客...
  9. python urlopen_Python爬虫教程-02-使用urlopen
  10. python判断字符串里的字符_Python检测字符串中是否包含某字符集合中的字符