web前端,css

css页面中的body背景图片,必须在此HTML页面上,返回上一个文件夹,然后才能进入img文件夹中,不需要重复。

body {
          background-image: url(../img/3.jpg);
          background-repeat: no-repeat;
      }

这是文件等级

链接另一个css样式的代码 <title></title><link href="css/s.css" rel="stylesheet" type="text/css" >

<p>标签的字体类型,行高和字体大小。

.p{
    font-style:normal;
    line-height:8px;
    font-size:14px;
}

一个类选择器,float左浮动,自己的边框高度和宽度,背景颜色,行高。

.s1{
    float:right;
    color:white;
    width:70px;
    height:20px;
    background-color:red;
    line-height:14px;
    
}

另一个类选择器,浮动分为绝对定位和相对定位,position=absolute/relative;

可以定位图片最下方的字体,使用top的值大于div的高度(因为它是绝对定位,相当于最近的div),也可以left,right=200px;设置位置。

.s2{
     position: absolute;
    width: 250px;/*自己框的宽高*/
    height: 22px;
    color:black;
    background-color:pink;
    top:200px;
}

div.d1 {

background-image: url(../img/1.jpg);
          position: absolute;
          width: 250px;
          height: 222px;
          left:20px;
      }

html总体代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/s.css" rel="stylesheet" type="text/css" >
  <!--<style>
      body {
          background-image: url(img/3.jpg);
          background-repeat: no-repeat;
      }
      div.d1 {
          background-image: url(img/1.jpg);
          position: absolute;
          width: 50px;
          height: 100px;
          left:20px;
      }

</style>-->
</head>
<body>
    <p><strong><span class="s">P</span>roducts </strong>/作品欣赏</p>
    <p class="p">three color scenery services <span class="s1">+MORE</span></p>

<hr style="border:1px dashed #000; height:1px">
    <div style="height:30px;"></div>
    <div>
        <div class="d1">1<p><span class="s2">美丽的山湾小镇 2014-09-15</span></p></div>
        <div class="d2"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d3"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d4"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d5"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
    </div>
    <div style="height:240px;"></div>
    <div>
        <div class="d6"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d7"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d8"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d9"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d10"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
    </div>
</body>
</html>
特别注意再title下的背景图片的地址使用相对路径,不需绝对路径。

body {
          background-image: url(img/3.jpg);
          background-repeat: no-repeat;
      }

时间: 2024-10-13 12:19:56

web前端,css的相关文章

web前端css技巧整理

"熟能生巧"这一词大家并不陌生吧,在学习web前端的时候,我们也需要做到这一点才能提高我们的工作效率等等.今天在网上发现了一篇css基础教程(http://www.maiziedu.com/course/web/421-5342/)文章,我觉得非常的有用,于是就分享给大家,这些技巧能让你更加专业. 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-h

零基础学WEB前端-CSS

CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现方法.样式 (style) 定义如何显示 HTML 元素:样式通常存储于样式表中:外部样式表存储于 CSS 文件中. CSS可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 1.CSS基础

web前端—css面试题

1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id > class > tag(important要优先于内联样式) 3.阐述一下CSS3的新增伪类. 4.如何居中 div?如何居中一个浮动元素?如何让绝对定位的div居中? div居中:给div一个宽度,然后添加margin: 0 auto;属性即可. 浮动元素居中: 绝对定位的div居中: 5

Bootstrap(Web前端CSS框架)

官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 即:Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 百科定义: 简介:Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.Boot

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以

Bootstrap (Web前端CSS框架)

Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它是由动态CSS语言less写成.Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构. CSS:Bootstrap 自带以下特性:全局的 CSS 设置.定义基本的 HTML 元素样式.可扩展的 class,以及一个先进的网格系统. 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像.下拉菜单.导航.警告框.弹出框等

web前端——CSS 02 选择器

css的选择器:1.基本选择器 2.高级选择器 基本选择器包含: 1.标签选择器标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 2.id选择器# 选中id 同一个页面中

web前端——CSS 01 css的引入方式

引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本

web前端-css

1.1CSS 链接的四种状态: a:link --普通的.未被访问的链接 a:visited --用户已访问的链接 a:hover --鼠标指针位于链接的上方 a:active --链接被点击的时刻 这里我们需要注意的是这四个属性设置要遵循的顺序问题: a:hover 必须位于 a:link 和 a:visited 之后 a:active 必须位于 a:hover 之后 我们要在 link 属性中加入 text-decoration 属性,可以去掉下划线 1.2css轮廓 轮廓(outline)

web前端css总结

css主要是选择器和多条声明构成 每个声明由属性和值组成 选择器分为:派生选择器.id选择器.类选择器.属性选择器.伪类选择器.伪元素选择器 派生选择器允许根据文档的上下文关系来确定某个标签的样式 id选择器可以为特有id的html元素制定特定样式,每个元素都有不同的id,每个id只能指定一个元素 类选择器可以为多个元素制定一样的样式可多,可供多个元素共同使用 可以为拥有指定属性的 HTML 元素设置样式 伪类和伪元素用于向某些选择器添加特殊的效果 属性优先级: 在css中importart拥有