웹 프론트엔드 HTML 튜토리얼 html+css基础_html/css_WEB-ITnose

html+css基础_html/css_WEB-ITnose

Jun 24, 2016 am 11:58 AM
html+css 베이스

完整的HTML结构

 

   样式的引用

  一。内部编写

body {background:black; text-spacing:0.5em}

.div_css1 {align="center" margin:20px}

.p_css1 {color:red; font:(Style)itlic||oblique (variant)small-caps||none (weight)800(400=norml 700=bold) (size)4em (family)“宋体”||Times New Norman}

(if ues:   so use the style just 1 times)!!!

#div_css {}

(or ues:    so don't write"class or id =?" )

div.p {}

div p {}

二。外部引用

 

 超链接的样式

a {}         // all super links

a:link {}         //no linked links

a:visited{}           //alredy linked links

a:hover{}         //on mose move to the link 

a:action{}      // 点击时

 

  插入flash文件

 

                                               

  插入视频

 

 插入网页块

 

插入表单

   

 一。文本输入(账号,密码)

账号

密码

 

 二。提交表单

  

 三。单选

xx

xx

 

四。多选

xx

xx

xx

 

 五。下拉菜单

     

六。列表(没有下拉)

.......

......

                                    

  悬浮文字框

xx

     

  滚动文字

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

   

 

 表格

  //合并横向

  //合并竖向

xx
xx xx

 

 文字的一些属性

设置元素内容的文本属性

(1)举例设置文本首行缩进

   text-indent:2em;

(2)举例设置文本对齐方式

   text-align:left | right | center;

(3)举例设置文本修饰方式

   text-decoration:underline;

(4)举例设置字间距

   letter-spacing:2em;

(5)举例设置词间距

   word-spacing:0.5em;

(6)举例空白显示形式 P56

   white-space:pre;

外边距margin:围绕在元素边框之外的可选区域。

内边距padding:文本内容到边框之间的可选区域

 

 元素浮动

浮动:

float

有2个方向: left  right none(不浮动)

对于文字浮动,必须设置高度,宽度,如果不设,后后果自负。

html+css基础_html/css_WEB-ITnose

清除浮动:

clear:none;  //允许元素的两边都可以有浮动

clear:left;  //不允许左边有浮动元素

clear:right; //不允许右边有浮动元素

clear:both;  //两边都不允许有浮动元素

 

  定位类型position

 分类:

static(静止)此为默认,即按照正常的文本流,占用正常的位置。

fixed(固定的) 相对于浏览器窗口定位(保留原位置)

 position:absolute;  

绝对定位:相对于父级元素(被包含容器)。

position:relative; 

相对定位:相对于没有设置position时的正常位置定位

原始空间会保留下来。(意思就是说按static的位置算的地方不会出现另外的标签。如DIV,IMG等等。)

例子:

.div_1 {width:150px;height:200px;}

.text1 {width:200px;height:100px;left:160px;}

哈,我是一个帅哥

是不是哦,我晕你

我看看行不行。

运行结果为:哈我是一个帅哥  是不是哦,我晕你

                  我看看行不行。

解释:“哈我是一个帅哥”用的是absolute 绝对定位,它相对于第一个DIV来定位,因为第一个DIV是它的父级元素,将它包含在里面。所以它出现在顶部起头。(因为没对其设置left 和top等)

“是不是哦,我晕你”也是absolute 绝对定位,它相对于第一个DIV定位,设置了left值为160px,大于上一个div的宽度,所以不会重合。

“我看看行不行”用的是relative 相对定位,它相对与父级元素定位,也就是第一个DIV,它定位的位置从父级元素里面的最开始位置算起,所以,如果不设置top的话就会和第二个div重合。而字体的大小一般为15px‘

                 

指定裁剪区域

position:absolute;

clip:rect(top right bottom left);

top:从上到下裁去top的长度。

left:从左到右裁去left的长度。

right:从左到右裁出right的长度。

bottom:从上到下裁出bottom的长度

 

将块级元素转化为字符级元素

display:inline;

 

将字符级元素转化为块级元素

display:block;

 

处理溢出 

position:absolute;(必须为absolute)

overflow:visible;  //溢出区域可见

overflow:hidden;   //溢出区域不可见

overflow:scroll;   //溢出区域出现滚动条

 

 盒模型 

有 margin padding border width  height 

简写时安上右下左顺序来写

如:border-width:1em 2em 2em 2em

注意:上下左右这几个属性:

在设置时如果只出现3个值,则代表上 左右 下  

                 2个值: 上下  左右

                 1个值:全部  =出现4个一样的值

 

 插入多媒体

 

转载

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PHP 기본 튜토리얼: 초보자부터 마스터까지 PHP 기본 튜토리얼: 초보자부터 마스터까지 Jun 18, 2023 am 09:43 AM

PHP는 웹 개발의 모든 작업을 처리할 수 있는 널리 사용되는 오픈 소스 서버 측 스크립팅 언어입니다. PHP는 웹 개발에 널리 사용되며, 특히 동적 데이터 처리에 뛰어난 성능을 발휘하여 많은 개발자들에게 사랑받고 사용되고 있습니다. 이 기사에서는 초보자가 시작부터 능숙해질 수 있도록 PHP의 기본 사항을 단계별로 설명합니다. 1. 기본 구문 PHP는 코드가 HTML, CSS 및 JavaScript와 유사한 해석 언어입니다. 모든 PHP 문은 세미콜론으로 끝납니다.

Go 언어 변수의 기본 사항을 알아보세요. Go 언어 변수의 기본 사항을 알아보세요. Mar 22, 2024 pm 09:39 PM

Go 언어는 Google이 개발한 정적으로 유형이 지정되고 컴파일되는 언어로, 간결하고 효율적인 기능으로 인해 개발자들의 광범위한 관심과 사랑을 받았습니다. Go 언어를 학습하는 과정에서 변수에 대한 기본 지식을 익히는 것은 중요한 단계입니다. 이 글에서는 Go 언어의 변수 정의, 할당, 유형 추론 등의 기본 지식을 구체적인 코드 예제를 통해 설명하여 독자가 이러한 지식 포인트를 더 잘 이해하고 숙달할 수 있도록 돕습니다. Go 언어에서는 var 키워드를 사용하여 var 변수 이름 변수 유형의 형식인 변수를 정의할 수 있습니다.

PHP 기본 소개: 에코 함수를 사용하여 텍스트 내용을 출력하는 방법 PHP 기본 소개: 에코 함수를 사용하여 텍스트 내용을 출력하는 방법 Jul 30, 2023 pm 05:38 PM

PHP 기본 소개: 에코 함수를 사용하여 텍스트 내용을 출력하는 방법 PHP 프로그래밍에서는 일부 텍스트 내용을 웹 페이지에 출력해야 하는 경우가 많습니다. 이 기사에서는 echo 함수를 사용하여 텍스트 콘텐츠를 출력하는 방법을 소개하고 일부 샘플 코드를 제공합니다. 시작하기 전에 먼저 PHP를 설치하고 실행 환경을 구성했는지 확인하세요. 아직 PHP가 설치되지 않은 경우, PHP 공식 홈페이지(https://www.php.net)에서 최신 안정 버전을 다운로드 받으실 수 있습니다.

C언어의 기능에 대한 상세한 설명 : 기초부터 고급까지, 기능의 활용에 대한 종합적인 분석 C언어의 기능에 대한 상세한 설명 : 기초부터 고급까지, 기능의 활용에 대한 종합적인 분석 Feb 18, 2024 pm 02:25 PM

C 언어 함수 백과사전: 기본부터 고급까지, 함수 사용 방법에 대한 자세한 설명, 구체적인 코드 예제가 필요합니다. 소개: C 언어는 널리 사용되는 프로그래밍 언어이며 강력한 기능과 유연성으로 인해 많은 개발자가 첫 번째로 선택합니다. C 언어에서 함수는 코드 조각을 독립적인 모듈로 결합하여 코드의 재사용성과 유지 관리성을 향상시키는 중요한 개념입니다. 이 글에서는 C 언어 함수의 사용법을 기초부터 소개하고 점차적으로 발전시켜 독자들이 함수 작성 기술을 익히는 데 도움을 줄 것입니다. 1. C에서 함수 정의 및 호출

지금 Microsoft로부터 무료 Basic C# 인증을 받을 수 있는 기회를 놓치지 마세요. 지금 Microsoft로부터 무료 Basic C# 인증을 받을 수 있는 기회를 놓치지 마세요. Sep 01, 2023 pm 12:45 PM

모든 C# 개발자에게 전화하세요! Microsoft와 비영리 단체인 freeCodeCamp는 새로운 글로벌 무료 Basic C# 인증 출시를 발표했습니다. 이 인증은 모든 수준의 개발자가 다양한 응용 프로그램을 만드는 데 사용되는 널리 사용되는 프로그래밍 언어인 C#의 기본 사항을 배울 수 있도록 고안되었으며 이를 LinkedIn 프로필에 표시할 수 있습니다. 이 인증에는 35시간의 Microsoft Learn 교육 과정과 freeCodeCamp에서 호스팅되는 80개의 질문으로 구성된 시험이 포함되어 있습니다. 이 과정에서는 변수, 데이터 유형, 제어 구조 및 객체 지향 프로그래밍과 같은 주제를 다룹니다. “우리의 Basic C# 인증은 바로 이러한 다재다능한 기능을 마스터할 수 있는 능력을 증명하는 것입니다.

PHP 함수 사용법: 기초부터 고급까지 PHP 함수 사용법: 기초부터 고급까지 Jun 15, 2023 pm 11:11 PM

PHP는 동적 웹사이트, 웹 애플리케이션 및 기타 인터넷 서비스를 개발하는 데 널리 사용되는 서버측 스크립팅 언어입니다. PHP 애플리케이션을 개발하는 과정에서 함수를 사용하면 코드를 단순화하고 코드 재사용성을 향상시키며 개발 비용을 줄이는 데 도움이 될 수 있습니다. 이 글에서는 PHP 함수의 기본 사용법과 고급 사용법을 소개합니다. 1. PHP 함수의 기본 사용법 1. 함수 정의 PHP에서는 function 키워드를 사용하여 함수를 정의합니다. 예: functiongreet($name){

PHP 연구 노트: 기본 구문 및 변수 정의 PHP 연구 노트: 기본 구문 및 변수 정의 Oct 09, 2023 am 08:03 AM

PHP 연구 노트: 기본 구문 및 변수 정의 오늘날 인터넷 시대에 널리 사용되는 서버 스크립팅 언어인 PHP(Hypertext Preprocessor)는 점점 더 많은 개발자들에 의해 선호되고 있습니다. 이 글에서는 PHP의 기본 구문과 변수 정의를 소개하고, 초보자가 PHP를 더 잘 이해하고 익히는 데 도움이 되는 구체적인 코드 예제를 제공합니다. 1. PHP 기본 구문 PHP 코드 표시 PHP 코드에서는 "<?php"와 "?&를 자주 사용합니다.

Linux를 처음부터 배울 수 있나요? 무엇을 배워야 합니까? Linux를 처음부터 배울 수 있나요? 무엇을 배워야 합니까? Feb 19, 2024 pm 12:57 PM

IT업계에 취업하고 싶지만 프로그래밍을 배우고 싶다면 어떤 기술을 선택해야 할까요? 당연히 리눅스 운영과 유지보수겠죠? Linux는 광범위한 응용 프로그램과 좋은 고용 전망을 제공하여 시장에서 매우 인기 있는 기술이며 많은 사람들이 선호합니다. 그렇다면 질문은, 기본 지식 없이도 리눅스 운영과 유지 관리를 배울 수 있느냐는 것입니다. 서버 시장에서 리눅스 시스템은 안정성, 보안성, 무료 오픈 소스, 효율성, 편의성 등의 장점으로 인해 최대 80%의 시장 점유율을 차지하고 있습니다. . 이것으로부터 Linux 애플리케이션이 매우 널리 사용된다는 것을 알 수 있습니다. 지금이든 미래이든 Linux를 배우는 것은 매우 좋은 선택입니다. 처음부터 배울 수 있는지에 대해서는 당연히 내 대답은 다음과 같습니다. 올드보이 교육 리눅스 대면 수업은 기초 지식이 전혀 없는 사람들을 위해 특별히 고안되었습니다.

See all articles