Jadual Kandungan
cursor:default默认箭头型
cursor:pointer手型
cursor:text文本光标
Rumah hujung hadapan web html tutorial Web前端学习第十二天·fighting_使用CSS布局和定位(二)_html/css_WEB-ITnose

Web前端学习第十二天·fighting_使用CSS布局和定位(二)_html/css_WEB-ITnose

Jun 24, 2016 am 11:16 AM

我听说最近涨粉都是因为头像啊,于是我就换了一个。

还听说涨粉都是因为是女生啊,于是我不能再无动于衷了,就问一句,难道粉丝都是男生?

我是要成为后宫佳丽三千人的男人啊~

 

用户界面样式

  outline  复合属性(outline-width、outline-style、outline-color),设置对象外的线条轮廓。outline画在border外面。

    使用频率一般,在H5中不建议使用。

    语法与border的使用类似。

示例代码如下:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>outline设置对象外的线条轮廓</title> 6     <meta charset="utf-8" /> 7     <style type="text/css"> 8         div { 9             border:5px dashed red;10             outline:10px solid green;11             width:100px;12             height:100px;13             text-align:center;14         }15     </style>16 </head>17 <body>18     <div>19         20     </div>21 </body>22 </html>
Salin selepas log masuk

运行结果:

  cursor 设置在对象上移动的鼠标指针采用何种系统预定义的光标形状。

    使用频率常用。

    语法:cursor:[(使用自定义的图像作为光标类型,IE和Opera只支持.cur图片格式,火狐、谷歌和Safari也支持常见的图片格式) [ ]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

    游戏中使用自定义图片做鼠标指针的情况较为常见,一般网站只是用系统预定义的。

示例代码如下:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>CursorDemo设置鼠标光标的形状(如手型或箭头)</title> 6     <meta charset="utf-8" /> 7      8 </head> 9 <body>10     <ul>11         <li>12             <h3 id="cursor-default默认箭头型">cursor:default默认箭头型</h3>13             <input type="button" value="箭头" style="cursor:default" />14         </li>15         <li>16             <h3 id="cursor-pointer手型">cursor:pointer手型</h3>17             <input type="button" value="手型" style="cursor:pointer" />18         </li>19         <li>20             <h3 id="cursor-text文本光标">cursor:text文本光标</h3>21             <input type="button" value="文本光标" style="cursor:text" />22         </li>23     </ul>24 </body>25 </html>
Salin selepas log masuk

运行结果:

  zoom 设置对象缩放比例。

    语法:zoom:normal(正常显示) | (制定一个值,不允许负值) | (百分比设置)

示例代码如下:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>Zoom缩放比例</title> 6     <meta charset="utf-8" /> 7 </head> 8 <body style="margin:50px;"> 9     <ul>10         <li style="zoom:normal">11             zoom:normal缩放正常12         </li>13         <li style="zoom:3">14             zoom:315         </li>16         <li style="zoom:300%">17             zoom:300%18         </li>19         <li style="zoom:100%">20             zoom:100%21         </li>22         <li style="zoom:500%">23             zoom:500%24         </li>25     </ul>26 </body>27 </html>
Salin selepas log masuk

运行结果:

 

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

See all articles