Hỏi - Đáp

(#559) -EM đang học tới tuần 6, bài 1 phần 2 css3. Thầy cho em đường link truy cập vào web như thầy trình bày trong slide để lấy code css3 bolder. em cảm ơn
Học viên: phu

Giáo viên trả lời:

Bạn truy cập theo link mới này nhé http://hocwebgiare.com/css3/border-radius/index.html
Sau này nếu gặp địa chỉ nào là hoconline.vietchuyen.edu.vn Bạn hãy đổi thành hocwebgiare.com

(#557) -hưa thày! Thày test júp em đoạn code animation css3 này với ạ, em ko hỉu sao nó chỉ chạy được trên mỗi chrome mà ko chạy được trên ie10 và firefox ạh em cảm ơn thày ạh :'(
Học viên: Toan Nguyentoanthien

Giáo viên trả lời:
div
{
width:600px;
height:100px;
font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold;
text-align:center;
line-height:90px;
background-color:#3366FF;
animation:Myfirst 5s linear 0s infinite alternate running;
-webkit-animation:Myfirst 5s linear 0s infinite alternate running;
-moz-animation:Myfirst 5s linear 0s infinite alternate running;
}

@keyframes Myfirst
{
from {background-color:#3366FF; transform:rotate(25deg);}
to {background-color:#FF6600; transform:rotate(360deg);}
}

@-webkit-keyframes Myfirst
{
from {background-color:#3366FF;- webkit-transform:rotate(25deg) ;}
to {background-color:#FF6600;- webkit-transform:rotate( 360deg);}
}

@-moz-keyframes Myfirst
{
from {background-color:#3366FF;- moz-transform:rotate(25deg);}
to {background-color:#FF6600;- moz-transform:rotate(360deg);}
}


<div> Chào mừng các bạn đến với css3 animation</div>

==========================

Trong đoạn này Bạn hãy bỏ running đi để chạy được trên cả 3 trình duyệt

animation:Myfirst 5s linear 0s infinite alternate;
-webkit-animation:Myfirst 5s linear 0s infinite alternate;
-moz-animation:Myfirst 5s linear 0s infinite alternate;

(#556) -hiện tại e thấy thiết kế website theo dạng này rất nhiều http://www.adtop.vn/index-vi.html , không biết thầy có thể hướng dẫn e chút chút về nó không thầy.?
Học viên: thanh

Giáo viên trả lời:
Trang web này đơn giản chỉ làm 2 ngôn ngữ và có các liên kết trong cùng một trang web thôi Bạn.

Trong trang này cũng có sử dụng các hiệu ứng CSS3 Animation để tạo hiệu ứng cho các đối tượng.
Đã gửi mẫu template website dạng này cho Bạn tham khảo. Kiểm tra mail nhé.

(#555) -Thưa thày, em đang thực hành bài 9 (phần 2), tuần - 6 phần css 3 transform ạh em thấy thày có dùng thuộc tính position (ở vài bài trước cũng có dùng) em thấy trong position có nhìu giá trị, thày có thể giảng júp em các já trị thuộc tính đó có tác dụng jì không ạh (giá trị từng thuộc tính ạ) và trong bài 9 này em thấy có thuộc tính z-index để đưa đtượng lên layer cao hơn :v (em có giủi kèm 1cái hình, em mún hỏi cái hình đó có pải là khi cắt wa dw thì họ dùng z-index để đặt chồng nó lên ko ạh ( các vị trí box chồng lên nhau ạh) thêm nữa trong bài 9 này thì z-index em nghĩ là đặt trong phần " hinhtrichdan img:hover " thì nó mới chồng lên trên hình khác khi ta hover wa hình ạh(trong bài thì thày cho nó nằm trong ' hinhtrichdan img ' em nghĩ là bị lộn ạh :v) ( em có thử làm như vậy và bỏ thuộc tính position đi thì nó vẫn jống như cũ nên em ko hỉu position này lắm =,=)) em cảm ơn thày nhhìu <3
Học viên: Toan Nguyentoanthien

Giáo viên trả lời:

Thuộc tính CSS position dùng để định vị trí cho các thành phần trong trang web, nó thường dùng kèm theo thuộc tính định vị trí như: left, right, top, bottom

Ví dụ ta có nội dung trang web có 2 thành phần như sau: nội dung và phần bao quanh nội dung

div {
border: 1px solid red;
height: 400px;
width:400px;
margin-top:50px;
margin-left:50px;
}

p {
background:#FF0;
margin:0px;
}

<div>
<p>Nội dung</p>
</div>


Thuộc tính position: relative; : Định vị trí tương đối cho thành phần. Vị trí tương đối phụ thuộc vào thành phần bao ngoài.

Ví dụ:

div {
border: 1px solid red;
height: 400px;
width:400px;
margin-top:50px;
margin-left:50px;
}

p {
background:#FF0;
margin:0px;
position:relative;
left:20px;
top:20px;
}

<div>
<p>Nội dung</p>
</div>
Cach su dung CSS Position

Thuộc tính position: absolute : Định vị trí tuyệt đối cho thành phần, khi sử dụng giá trị này thì vùng xử lý của thành phần sẽ phụ thuộc vào nội dung của thành phần.

Thành phần sử dụng position: absolute; sẽ định vị trí theo cửa sổ trình duyệt:

Ví dụ:

div {
border: 1px solid red;
height: 400px;
width:400px;
margin-top:50px;
margin-left:50px;
}

p {
background:#FF0;
position:absolute;
left:20px;
top:20px;
}

<div>
<p>Nội dung</p>
</div>


Nếu thành phần bao ngoài sử dụng thuộc tính position: relative; thì thành phần sử dụng position: absolute; bên trong sẽ định vị trí theo thành phần bao ngoài:

Ví dụ:

div {
border: 1px solid red;
height: 400px;
width:400px;
margin-top:50px;
margin-left:50px;
position:relative;
}

p {
background:#FF0;
position:absolute;
left:20px;
top:20px;
}

cach dung css positon

Còn thuộc tính z-index dùng để thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.

Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị mặc định là 0.

Có thể sử dụng số âm.
Giá trị tốt nhất là không sử dụng đơn vị.

Chú ý: z-index chỉ làm việc cùng với thuộc tính position.

Ví dụ:

div {
position: relative;
}
div p.layer1 {
border: 1px solid #F00;
position: absolute;
top: 0px;
left:0px;
z-index:1;
}
div p.layer2 {
border: 1px solid #06C;
position: absolute;
top: 50px;
left: 250px;
z-index:2;
}

<div>
<p class="layer1"><img src="http://placehold.it/300x300" alt="Lớp 1" /></p>
<p class="layer2"><img src="http://placehold.it/250x250" alt="Lớp 2" /></p>
</div>

Cach su dung z-index

(#554) -Thầy ơi, sao em không làm được nhiều keyframes trong cùng một 1 file html vậy thầy. Với lại mình có thể sử dụng gradient trong keyframes được không thầy? File tên là: css3-ani.html Div bên trái nó không nhận keyframes còn div bên thì nhận Thầy sửa giúp em nha!
Học viên: Phuc Doan Hoang

Giáo viên trả lời:

.this {
text-align: center;
height: 200px; width: 200px;
left:900px;
float: left;
position: relative;
border: solid 1px black;
animation: your 7s infinite;
-webkit-animation: your 7s infinite;
}
@-webkit-keyframes your {
0% {background-color:aqua; left:900px; top:0px; -webkit-transform: scale(0.9) rotate(-60deg)}
20% {background-color:linear-gradient(to right,greenyellow,aliceblue,moccasin); left:600px; top:200px; -webkit-transform: scale(1.1) rotate(30deg);}
40% {background-color: mediumaquamarine; left:500px; top:0px; -webkit-transform:skewY(-30deg);}
60% {background-color:azure; left:500px; top:200px; -webkit-transform:skewY(-60deg);}
80% {background-color:gainsboro; left:900px; top:200px; -webkit-transform:rotate(-30deg);}
100% {background-color: beige; top: 0px; left:900px;}
}
.that {
text-align: center;
height: 200px; width: 200px;
position: relative;
float: left;
border: solid 1px black;
animation: myFrame 7s infinite;
-webkit-animation: myFrame 7s infinite;
}
@-webkit-keyframes myFrame {
0% {background-color: aqua; left:0px; top:0px; -webkit-transform:skewY(30deg);}
25% {background-color: aquamarine; left: 200px; top:200px; -webkit-transform: skewY(30deg);}
75% {background-color: azure; left:0px; top:200px; -webkit-transform:skewY(-30deg);}
100% {background-color: beige; left:0px; top:0px; -webkit-transform:skewY(-30deg);}
}
<div style="width:1200px;">
<div class="that">Doan Hoang Phuc</div>
<div class="this">Doan Hoang Phuc</div>
</div>

Kiểm tra trong đoạn code của Bạn thấy thiếu phần đóng móc. Để ý chỗ móc màu đỏ.
gradient trong keyframes vẫn sử dụng bình thường

(#552) -Thưa thày! Em muốn hỏi là: Sự khác nhau giữa 2loại css : Class và id là như thế nào ạh vd như: .dinhdang { thuoctinhdoituong; }
Học viên: Toan Nguyentoanthien

Giáo viên trả lời:
Nếu dùng class thì khi định nghĩa CSS sẽ dùng dấu . ví dụ .a hay .b hay .c


Khi gọi class sẽ là

<div class="a">
Nội dung
</div>

Nếu dùng ID khi định nghĩa ID sẽ dùng dấu # ví dụ #a hay #b hay #c

Khi gọi ID sẽ là

<div id="#a">
Nội dung
</div>

Class thường dùng để định dạng, khi dùng class có ưu đểm là ta có thể gọi nhiều class để áp nhiều thuộc tính cho đối tượng

ví dụ

<div class="a b c">
Nội dung trong này bị ảnh hưởng thuộc tính của cả 3 class
</div>

còn nếu dùng ID thì chỉ áp dụng được 1 ID thôi không dùng nhiều ID được

<div id="a">
Nội dung này chỉ ảnh hưởng bởi các thuộc tính trong ID a thôi
</div>

Thường chỉ dùng ID khi dùng AJAX hay link tới các nội dung trong cùng 1 trang web thì ta sẽ dùng ID còn khi muốn định dạng màu mè hay hiệu ứng cho các đối tượng thì dùng class để dễ làm hơn vì nó cho ta gọi nhiều class cùng một lúc, còn ID không làm được.

Nhưng dùng class thì không sử dụng link trong trang hay AJAX được

Bạn ghi

<div_box id="thuoctinhdoituong"> nội dung </div>

là sau vậy? div la div chứ div_box là gì vậy??? đâu có thẻ nào tên div_box ???

<div id="thuoctinhdoituong">
   Nội dung
</div>

ghi như vậy là sai <div_box>Nội dung</div>

(#551) -Em chào thầy Thầy cho em hỏi mỗi lần thay đổi giá trị một trong các input bài tính tiền điện thì mình phải focus các input khác(có thể thay đổi hay giữ nguyên(autocomplete)). Sao nó không hiểu và lấy giá trị hiện tại của nó. Thêm một cái nữa là cái phần gửi câu hỏi này nếu em nhập mã bảo mật không đúng thì nó reset cái câu hỏi và phải nhập lại từ đầu, mong thầy xem lại. Kính chào thầy.
Học viên: trungkien

Giáo viên trả lời:
Trong bài này thường thì ta chỉ load focus vào trường text filed đầu tiên của Form để cho người dùng dễ dàng nhâp liệu thôi.

Khi click nút tính tiền thì kết quả sẽ xuát ra text filed số tiền thanh toán và các giá trị đã xuất ra rồi sẽ nằm trong các trường text filed này.
Muốn thực hiện tính toán lại thì Bạn nên thêm một nút vào với kiểu input="reset" để khi nhấn nút này nó sẽ huỷ bỏ các giá trị có trên form để ta thực hiện lại.

Còn gửi câu hỏi bảo mật gì đó không hiểu Bạn muốn bảo mật gì cho Form trong bài thực này (trong bài thực hành này nhớ không có mã bảo mật chèn vào form. Mã bảo mật thường chỉ làm cho các trang register thôi. Đang tính tiền điện nhập mã bảo mật chi vậy, mỗi lần tính mỗi lần nhập mã bảo mật sẽ rất mất thời gian.).THường các mã bảo mật sẽ phát sinh ngẫu nhiên, khi Submit Form thì nó sẽ Refresh lại trình duyệt và sẽ phát sinh lại số mới.

Bạn hãy gửi flie bài tập Bạn đang làm để tôi kiểm tra.

(#550) -Thầy ơi bài 48 phần 2 cách tạo hiệu ứng động JQUERY khi di chuyển chuột vào hình ảnh.làm e làm như thầy mà ra khi chuột rê vào hình là 2 chữ xem hiện lên tức là của cái trên và cái dưới nữa .
Học viên: trinhhoang

Giáo viên trả lời:
Theo như Bạn mô tả như vậy chắc là do xung đột thư viên Jquery rồi.

Trong một trang bạn chỉ gọi một file thư viện jquery.min thôi.

Bạn hãy gửi source (thư mục web) của Bạn qua Email để tôi kiểm tra cho Bạn.

(#549) -Thầy ơi, font-family em tạo áp đặt lên trang css3-test.html nhưng sao nó không nhận font thầy ạ!! Mặc dù em đã tạo tới 2 @font-face rồi ạ! Thầy sửa lỗi giùm em ạ! Cám ơn thầy nhiều!
Học viên: Phuc Doan Hoang

Giáo viên trả lời:
Kiểm tra source code của Bạn thấy sai vài chỗ

@font-face chứ không phải @fontface

Đường dẫn chỉ tới font bị sai
@font-face {
font-family:myFirstFont;
src: url(../Fonts/bastardus_sans/BastardusSans.ttf);
}
trước thư mục Fonts có dấu ../

cach su dung CSS3 Font

(#548) -Thưa thày, thày xem jùm em cái menu bar bên cột trái được không ạ :( hôm bữa em làm rùi, nó chạy ngon lành, hôm nay em học tiếp bài thực hành làm trag giới thiệu, em có ctrl + z mấy lần để làm lại chỗ bị sai, sau khi sửa dc chỗ sai, em save all và chạy thử thì cái menubar bên trái nó bị lỗi, em tìm hoài mà ko hỉu nó bị cái jì =,= :(( cái web em có đính kèm ở dưới ạ :(( em cảm ơn thày
Học viên: Toan Nguyentoanthien

Giáo viên trả lời:
tao spry menu



Trong tập tin layout1.css chỗ class .box Bạn không dùng thuộc tính overflow: hidden . Hãy bỏ thuộc tính này đi

.box {
width: 200px;
margin-bottom: 10px;
/*overflow: hidden;*/
}




(#547) -Dạ thầy, em đang ôn lại các kiến thức về html/css.chưa dùng html5/css3. Nhưng Có cái phần chi tiết sản phẩm ấy thầy, em muốn làm giống cái trang của thầy: http://123muanhanh.vn/danhmuc15/c582/Mat-day-chuyen-hoa-hong.html. Soi ảnh rồi có tab thông tin sản phẩm bên dưới ấy thầy Lúc trước thầy có share cho em cái html/css:etalage. mà em bỏ zô lỗi tùm lum hết rối quá, xóa đi làm lại vẫn chưa được thầy ak. Thầy hướng dẫn em giúp em phần chi tiết với thầy nhé.nếu được thầy cho em cái video với ;). Em cám ơn thầy nhiều ạ. Đây là phần project em đang làm và chỉnh sửa.
Học viên: Chuong Chung

Giáo viên trả lời:
Bỏ vào văng tùm lum là do nó xung đột Jquery, khi dung mấy cái Jquery này bạn phải chú ý là trong 1 trang web bạn chỉ được phép gọi 1 thư viện jquery.min thôi và thư viện nài phải load trước phần script của Bạn.


Tôi bỏ thử vào trang của Bạn thấy OK không bị văng gì cả

Tao chuc nang Zoom hinh

Check mail nhận bài về làm lại thử đi


(#546) -em chào thầy,thầy có thể hướng dẫn e cách tích hợp vchat để chat online được ko ạ,cám ơn thầy
Học viên: Hoàng lê

Giáo viên trả lời:
Bạn vào trang vchat.vn để đăng ký tài khoản và xác nhận số điện thoại và tên website cần gắn vchat vào.

Sau khi xác nhận xong các bước này thì bạn hãy đăng nhập vào website vchat.vn bạn sẽ thấy nó cho bạn một đoạn script nhỏ để chèn vào trang web của Bạn
cach chen vchat vao website
Bạn chỉ cần nhét đoạn này vào trong phần thân của trang web và tất cả các trang layout_x.php mà Bạn muốn có vchat này.
Tốt nhất nên tạo một trang vchat.php rồi bỏ đoạn này vào sau đó include nó vào trong phần thân của trang chủ và trong phần thân của tất cả các trang layout mà bạn muốn có vchat box xuất hiện.


(#545) -chào thầy,ở bài này sau khi làm theo video hướng dẫn thì em thấy không lấy được ID thành viên và product trong bảng wishlist khi vào mysql thầy ạ,không biết em có bị lỗi chỗ nào không,mong thầy giúp ạ,cám ơn thầy
Học viên: huuhoang

Giáo viên trả lời:
Bạn phải kiểm tra việc đăng nhập của thành viên trước khi họ nhấn nút Yêu thích.

Có login rồi thì mới có ID_thanhvien thì khi nhấn nút Yêu thích nó mới lưu được ID_thanhvien cùng ID_sanpham vào bảng wishlist.

Hãy kiểm tra lại là đã đăng nhập vào website hay chưa?

(#544) -Chào thầy, cho em hỏi thuộc tính data-sb và data-sb-hide nó có khác gì với thuộc tính class ạ. Em cảm ơn thầy!
Học viên: levuminh

Giáo viên trả lời:
Khác, các thuộc tính này là do người ta lập trình jquery tạo nên.

Còn class ta dùng chỉ là viết thuần CSS thôi.

(#543) -Hình như thầy chưa đính kèm file cài đặt ecart ạ
Học viên: huuhoang

Giáo viên trả lời:
Kiểm tra Email để nhận về cài đặt làm bài tập.

(#542) -da,thầy cho em hỏi sao trong tab common DWcs4 của e không có mục Menu Baar magic vậy ?
Học viên: tranminhthi

Giáo viên trả lời:
Bạn kiểm tra mail để nhận Extension này và về cài đặt vào thêm cho Dreamweaver CS4.

=> Nhớ dùng Extension manager CS4 để cài đặt Extension Menu Bar Magic
=> Lúc cài đặt Extension nhớ đóng chương trình Dreamweaver
=> Sau khi cài đặt xong Extension Menu bar Magic, mở Dreamweaver CS4 lên xem đã có chưa?

(#541) -Thầy ơi! e có thể download bài về học không thầy vì e xem trên bài thường bị rớt mạng mà refesh lại thì bài chạy lại từ đầu. thanks Thầy!
Học viên: thanh

Giáo viên trả lời:
Bạn nên dùng trình duyệt Internet Explorer 10 hay Internet Explorer 11 hay Microsoft Edge để xem Video có chất lượng tốt nhất, có thể xem tới xem lui các đoạn Video đã tải về xong.

(#540) -Chào thầy! Khi xem video, em thường xuyên bị rớt giữa chừng, nó cứ báo lỗi network error nên không thể xem hết video. Video em xem cũng không thể nhảy tới bất kỳ đoạn nào mình muốn, buốc lòng lúc nào cũng phải xem lại từ đầu và giữa chừng lại bị rớt. Xin thầy hướng dẫn cách khắc phục
Học viên: thanh

Giáo viên trả lời:
Bạn kiểm tra mail để xem hướng dẫn cách xem Video tốt nhất nhé.

(#539) -Dạ thầy, em đang thực hiện phần Bài tập cuối khóa, nhưng ở phần sitemap em đang bị lỗi ở màn hình thiết bị di động,(hiện đang ở màn hình:240*320) em đã điều chỉnh như thầy hướng dẫn: .sitemap_box, .sitemap_box_1{ width:100%; } nhưng sitemap vẫn không rớt xuống hàng được. Mong thầy kiểm tra giúp em, em cám ơn thầy nhiều
Học viên: Chuong Chung

Giáo viên trả lời:
Phần chỉnh cho màn hình từ 240 -> 320 bạn chỉnh như sau cho phần sitemap


cach tao sitemap

.sitemap {
width: auto;
height: auto; /*auto*/
background-color: #FDFDFD;
clear: both; 
padding-left:5px;
}
.sitemap_box {
width:auto;
float:none;
margin-right:0px;
margin-left:0px;
padding-top:10px;
margin-bottom:5px;
height:auto;
margin-top:10px;
border-right-width:0px;
border-right-style:dotted;
border-right-color:#CCC;
clear:both;
}
.sitemap_box, .sitemap_box_1 {
width:auto;
height:auto;
background-color:#FF6;
margin-left:0px;
margin-top:10px;
}

(#537) -Dạ thầy ơi, em còn bị lỗi này nữa thầy ơi. kì ghê vậy đó.haizz. help me thầy ơi.
Học viên: Chuong Chung

Giáo viên trả lời:
cach tao menu responsiveư


Lỗi này là do Bạn chép thiếu một số hình ảnh của menu. Hãy chép các hình ảnh trong thư mục images tôi gửi qua mail cho Bạn bỏ vào thư mục images trong website của Bạn hoặc Bạn có thể lấy các hình ảnh này trong thư mục script của menu.


...[Trang trước] ... 9 10 11 12 13 ...[Trang kế] ...